带省市区信息修改功能，需要先把省市区原数据select下拉显示，JQuery实现

最新推荐文章于 2022-11-19 23:13:54 发布

a281246240

最新推荐文章于 2022-11-19 23:13:54 发布

阅读量2k

点赞数 1

分类专栏：后台技术文章标签： jquery json ajax 异步省市区联动 java

本文链接：https://blog.csdn.net/a281246240/article/details/37669271

版权

后台技术专栏收录该内容

101 篇文章 0 订阅

订阅专栏

修改之前可获取到省市区等对应的Id，传给修改信息页面，在修改信息页面之前获取到全部的省市区，显示到下拉，并选中对应Id的省市区。

修改信息页面中：

<body οnlοad="shows(${zsadminuser.proid},${zsadminuser.cityid});">  //request中取得修改之前省市的id

function shows (proId,cityid,roleid) {
	    			
        			$.post("<%=path%>/admin/AdminUserAction!getAllProvince", function(data) {
    				$("#province option[value!='']").remove();
    				var jsonObj = eval("(" + data + ")");  //获得后台传过来的json对象值
    				for ( var i = 0; i < jsonObj.length; i++) {  //迭代
    				var $option = $("<option></option>");			
    				$option.attr("value", (i + 1));   //给下拉赋值
    				var row = jsonObj[i];  
    				for ( var p in row)
    					$option.text(row[p]);
    				$("#province").append($option);
    			 } 
    			var defaultsprovince_selector="#province option[value="+proId+"]";  //获得proid对应的下拉option
    			$(defaultsprovince_selector).attr("selected",true);  //给它选中显示
    		 });
					//处理城市显示,根据省份查询省份下的所属城市
        			if(cityid!=null){  
							$.post("<%=path%>/admin/AdminUserAction!getCityByPid",{
								proid : proId  //传递省份ID到后台
							}, function(data) {
								var jsonObj = eval("(" + data + ")");
								for ( var i = 0; i < jsonObj.length; i++) {
								var $option = $("<option></option>");			
									var row = jsonObj[i];
									for ( var p in row) {
										$option.attr("value", row[0]);
				 						$option.text(row[p]);
									}
									$("#city").append($option);
								 } 
								$("#city option[value="+cityid+"]").attr("selected",true); //选中cityid对应的option
							});
					 	}	
		    		}

List<Province> provinceList = provinceidao.getAllPProvince();
		JSONArray jsonArray = JSONArray.fromObject(provinceList);//把list结果转化为json对象

		try {
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().print(jsonArray.toString());  //把json对象传到JSP页面
		} catch (IOException e) {
			e.printStackTrace();
		}

public void getCityByPid(Integer proid) {
		List<City> cityList = cityidao.getByPidCitys(proid);
		JSONArray jsonArray = JSONArray.fromObject(cityList);
		try {
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().print(jsonArray.toString());
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

DIY需要科普的知识，来自伟大的度娘，

jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

参数：

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

jQuery 代码：

 
 
  
  $.post(
  
  "
  
  Ajax.aspx
  
  "
  
  , { Action: 
  
  "
  
  post
  
  "
  
  , Name: 
  
  "
  
  lulu
  
  "
  
   },     
   
  
  function
  
   (data, textStatus){        
    
  
  //
  
   data 可以是 xmlDoc, jsonObj, html, text, 等等.  
  
  

  
      
  
  //
  
  this;
  
  

  
      
  
  //
  
   这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this  
  
  

  
     alert(data.result);        }, 
  
  "
  
  json
  
  "
  
  );