*今天我们来讲讲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;
}
**好了,小编写到这里了,如有问题请留言,希望大家给个支持一下小编,
后期更新微服务跨框架教程**