1. 程式人生 > >如何使用ajax實現頁面資料儲存修改和根據條件查詢資料

如何使用ajax實現頁面資料儲存修改和根據條件查詢資料

 *今天我們來講講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;
	}


**好了,小編寫到這裡了,如有問題請留言,希望大家給個支援一下小編,

後期更新微服務跨框架教程**