*今天我們來講講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;
}
**好了,小編寫到這裏了,如有問題請留言,希望大家給個支持一下小編,
後期更新微服務跨框架教程**