如何使用ajax實現頁面資料儲存修改和根據條件查詢資料
阿新 • • 發佈:2018-11-19
*今天我們來講講ajax實現儲存和修改,其實很簡單,跟上期的刪除方法相似,*
*好了,廢話不多說,直接上程式碼*
注意:這裡麵包含了儲存方法,修改,和條件查詢及對select下拉列表的操作,請仔細看完
- 功能頁面Jsp
<%@ page language='java' pageEncoding='UTF-8'%> <%@taglib uri='http://www.dstech.net/dssp' prefix='dssp' %> <%@taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core' %> <%@taglib prefix='fmt' uri='http://java.sun.com/jsp/jstl/fmt' %> <script type='text/javascript' src='${pageContext.request.contextPath}/busicomps/charTest/content/cpdcarseries/cpdcarseriesForm.js?version=${resourceVersion}'></script> <script type='text/javascript' src='${pageContext.request.contextPath}/busicomps/charTest/js/serviceapi/CpdCarSeriesService.js?version=${resourceVersion}'></script> <div class="container-fluid app-container fixed no-header"> <div class="app-content"> <div class="panel panel-default fixed no-footer"> <div class="panel-heading clearfix"> <!-- 可以任意調整和刪除的部分 begin--> <div class="panel-title pull-left"> <!-- 標題放這裡-->資訊 </div> <div class="panel-toolbar pull-right"> <button class="btn m-b-xs w-xs btn-info" onclick="OnSave()"> <i class=" fa fa-save"></i>儲存 </button> <button class="btn m-b-xs w-xs btn-default" data-url="/charTest/CpdCarSeriesService/cpdcarseriesListPage" onclick="redirectDataUrl(this)"> <i class="fa fa-rotate-left"></i>返回 </button> </div> <!-- 可以任意調整和刪除的部分 end--> </div> <div class="panel-content"> <form name='charTestCpdCarSeriesForm' id='charTestCpdCarSeriesForm' method="post" action="/charTest/CpdCarSeriesService" class="form-horizontal row"> <input name="bean_status" type="hidden" id="bean_status" v-model="bean_status" value="${bean_status}"> <div class="col-sm-6 col-xs-12"> <div class="form-group"> <label class="control-label col-sm-4 col-xs-12">車系id</label> <div class="col-sm-8 col-xs-12"> <input type="text" id="seriesId" name="seriesId" v-model="seriesId" class="form-control" value="${CpdCarSeries.seriesId}" /> </div> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="form-group"> <label class="control-label col-sm-4 col-xs-12">車系編碼</label> <div class="col-sm-8 col-xs-12"> <input type="text" id="seriesCode" name="seriesCode" v-model="seriesCode" class="form-control" value="${CpdCarSeries.seriesCode}" /> </div> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="form-group"> <label class="control-label col-sm-4 col-xs-12">車系名稱</label> <div class="col-sm-8 col-xs-12"> <%-- <input type="text" id="seriesName" name="seriesName" v-model="seriesName" class="form-control" value="${CpdCarSeries.seriesName}"/> --%> <select id="seriesName" onchange="querysericeTypeId()" v-model="seriesName" name="seriesName" class="form-control select2"> <option value="${CpdCarSeries.seriesName}">${CpdCarSeries.seriesName}</option> </select> </div> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="form-group"> <label class="control-label col-sm-4 col-xs-12">品牌id</label> <div class="col-sm-8 col-xs-12"> <%-- <input type="text" id="brandId" name="brandId" v-model="brandId" class="form-control" value="${CpdCarSeries.brandId}"/> --%> <select id="brandId" data-select-key="brandId" data-select-value="brandName" onchange="queryServe()" data-url="/rest/charTest/CpdCarBrandService/query?&queryName=querCharList" name="brandId" v-model="brandId" class="form-control select2" value="${CpdCarSeries.brandId}"> </select> </div> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="form-group"> <label class="control-label col-sm-4 col-xs-12">車系型別id</label> <div class="col-sm-8 col-xs-12"> <input type="text" id="seriesTypeId" name="seriesTypeId" v-model="seriesTypeId" class="form-control" value="${CpdCarSeries.seriesTypeId}" /> </div> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="form-group"> <label class="control-label col-sm-4 col-xs-12">車系別名</label> <div class="col-sm-8 col-xs-12"> <input type="text" id="seriesAlias" name="seriesAlias" v-model="seriesAlias" class="form-control" value="${CpdCarSeries.seriesAlias}" /> </div> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="form-group"> <label class="control-label col-sm-4 col-xs-12">拼音</label> <div class="col-sm-8 col-xs-12"> <input type="text" id="pinyin" name="pinyin" v-model="pinyin" class="form-control" value="${CpdCarSeries.pinyin}" /> </div> </div> </div> </form> </div> </div> </div> </div>
-
javaScript功能程式碼
-
這裡$.each表示迴圈,相當於增強for迴圈
-
這裡麵包含了儲存方法,修改,和條件查詢及對select下拉的操作
<script language="JavaScript"> var charTestCpdCarSeriesFormConfig = {}; var charTestCpdCarSeriesVueForm; $(function() { charTestCpdCarSeriesVueForm = new VueForm("charTestCpdCarSeriesForm", charTestCpdCarSeriesFormConfig); }); function OnSave() { var beanStatus = $('#bean_status').val(); $.ajax({ url: BOMF.CONST.WEB_APP_NAME + "/rest/charTest/CpdCarSeriesService/AddAndupdateService?beanStatus=" + beanStatus, type: "post", dataType: "json", data: charTestCpdCarSeriesVueForm.getFormData(), success: function(data) { quickInfo("儲存成功", "success"); }, error: function(xhr, textStatus) { quickInfo("儲存失敗", "success"); } }); } //根據品牌Id查詢車系 function queryServe() { $("#seriesName").html(""); //清空上一次大的內容 //獲取品牌id var brandId = $("#brandId").val(); if(brandId == "{}") { alert("你還沒有選擇,請重新選擇!"); } else { $.ajax({ type: "get", url: BOMF.CONST.WEB_APP_NAME + "/rest/charTest/CpdCarSeriesService/query?queryType=all&queryName=queryList&filterQuery=true&brandId=" + brandId, dataType: "json", async: true, success: function(data) { if(data == "{}") { alert('沒有查到資料'); } else { $.each(data, function(index, itme) { //index相當於下標,item相當於物件,data就是後臺傳回的一個物件 var stam = "<option>" + itme.seriesName + "</option>"; $("#seriesName").append(stam); //.append追加標籤級資料 }); } }, }); } } //根據車系名稱查詢其他資訊 function querysericeTypeId() { var seviceName = $("#seriesName").val(); if(seviceName == "{}") { alert("請你先選擇內容"); } else { $.ajax({ type: "get", url: BOMF.CONST.WEB_APP_NAME + "/rest/charTest/CpdCarSeriesService/query?queryName=queryList&filterQuery=true&seriesName=" + seviceName, dataType: "json", async: true, success: function(data) { if(data == "{}") { alert("沒有查詢到資料"); } else { $.each(data, function(index, itme) { $("#seriesId").val(itme.seriesId); $("#seriesCode").val(itme.seriesCode); $("#seriesTypeId").val(itme.seriesTypeId); $("#seriesAlias").val(itme.seriesAlias); $("#pinyin").val(itme.pinyin); }); } }, }); } } </script>
- service層,建立儲存修改和查詢的方法
/** * CpdCarSeriesService.java */ @BomfService(serviceDesc="車輛車系表服務") public interface CpdCarSeriesService extends IBasicBeanService<CpdCarSeries> { //查詢 public Map<String, Object> querServiceList(String seriesId,User user )throws Exception; //修改 public Map<String, Object> AddAndupdateService(CpdCarSeries carSeries,String beanStatus,User user)throws Exception; //刪除 public Map<String, Object> deletCharListService(String seriesId,User user) throws Exception; }
- serviceImpl實現類,處理前端傳入的引數,然後返回值
/**
*根據seriesIId查詢資料
*/
@MethodParameter(desc="querServiceList",input="seriesId,user",postName="",postType={},httpMethod="get",queryString="",userParam="user")
@Transactional(rollbackFor=Exception.class)
@Override
public Map<String, Object> querServiceList(String seriesId, User user) throws Exception {
Map<String, Object> inpuMap=new HashMap<String,Object>();
try {
CpdCarBrand cpdCar=this.bomfManager.getBeanDaoHelper().queryById(CpdCarBrand.class,seriesId);
//將輸入的引數賦值給物件
inpuMap.put(seriesId, cpdCar);
inpuMap.put("sucess", true);
} catch (Exception e) {
// TODO: handle exception
inpuMap.put("sucess", false);
}
return inpuMap;
}
/**
*新增與修改
*/
@MethodParameter(desc="AddAndupdateService",input="carSeries,beanStatus,user",postName="carSeries",postType={CpdCarSeries.class}, queryString="",httpMethod="post",userParam="user")
@Transactional(rollbackFor=Exception.class)
@Override
public Map<String, Object> AddAndupdateService(CpdCarSeries carSeries, String beanStatus, User user) throws Exception{
Map<String, Object> map=new HashMap<String,Object>();
if(beanStatus.equals("add")){
CpdCarSeries cpd=this.bomfManager.getBeanDaoHelper().saveInsert(carSeries, null,user);
if(cpd!=null){
map.put("success", true);
map.put("message","新增成功");
}else{
map.put("success", false);
map.put("message","新增失敗");
}
}
if(beanStatus.equals("edit")){
CpdCarSeries cpd=this.bomfManager.getBeanDaoHelper().saveUpdate(carSeries, null, user);
if(cpd!=null){
map.put("success", true);
map.put("message","修改成功");
}else{
map.put("success", false);
map.put("message","修改失敗");
}
}
return map;
}
**好了,小編寫到這裡了,如有問題請留言,希望大家給個支援一下小編,
後期更新微服務跨框架教程**