如何使用ajax实现页面数据保存修改和根据条件查询数据

最新推荐文章于 2022-05-04 20:48:56 发布

冰仔启蒙小屋

最新推荐文章于 2022-05-04 20:48:56 发布

阅读量5.5k

点赞数 3

分类专栏： JAVA javascript ajax

本文链接：https://blog.csdn.net/weixin_43150581/article/details/82628461

版权

JAVA 同时被 3 个专栏收录

21 篇文章 1 订阅

订阅专栏

ajax

5 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

 *今天我们来讲讲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;
	}

**好了，小编写到这里了，如有问题请留言，希望大家给个支持一下小编，

后期更新微服务跨框架教程**

冰仔启蒙小屋

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
如何使用ajax实现页面数据保存修改和根据条件查询数据

*今天我们来讲讲ajax实现保存和修改，其实很简单，跟上期的删除方法相似，* *好了，废话不多说，直接上代码*注意:这里面包含了保存方法，修改，和条件查询及对select下拉列表的操作，请仔细看完功能页面Jsp&amp;amp;amp;amp;amp;lt;%@ page language='java' pageEncoding='UTF-8'%&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt
复制链接

扫一扫