JavaWeb 之 AJAX

Ajax

ajax：AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新

AJAX：Asynchronous JavaScript and XML，异步 javascript和 XML，带来用户体验改变，是web优化一种主要手段

AJAX = DHTML (HTML、CSS、JavaScript ) + XMLHttpRequest 对象

传统web交互模型，浏览器直接将请求发送给服务器，服务器回送响应，直接发给浏览器， Ajax交互模型，浏览器首先将请求 发送 Ajax引擎（以XMLHttpRequest为核心），AJax引擎再将请求发送给 服务器，服务器回送响应先发给Ajax引擎，再由引擎传给浏览器显示

1、同步交互模式，客户端提交请求，等待，在响应回到客户端前，客户端无法进行其他操作

2、异步交互模型，客户端将请求提交给Ajax引擎，客户端可以继续操作，由Ajax引擎来完成与服务武器端通信，当响应回来后，Ajax引擎会更新客户页面，在客户端提交请求后，用户可以继续操作，而无需等待 。

Google ： suggest建议、邮件定时保存、map地图

jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，我们能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

 

四种Ajax

1.

$("").load("url地址",data参数,function(){回调函数，返回的时候执行});

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

必需： URL 参数：规定希望加载的 URL。

可选： data 参数：规定与请求一同发送的查询字符串键/值对集合。

可选： callback 参数：是 load() 方法完成后所执行的函数名称。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <script src="js/jquery-3.2.1.min.js"></script>
 7         <style type="text/css">
 8             div{
 9                 width: 60px;
10                 height: 60px;
11                 background-color: aquamarine;
12                 margin: 2px;
13             }
14                 </style>
15         <script>
16             $(document).ready(function(){
17               $("#btn1").click(function(){
18                 $('#test').load('js/jquery-3.2.1.min.js');
19               })
20             })
21         </script>
22     </head>
23     <body>
24         <h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
25         <button id="btn1" type="button">获得外部的内容</button>
26     </body>
27 </html>

2.

$.get(...);
3.

$.post(...);

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

  • GET - 从指定的资源请求数据
  • POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

4.

$.ajax({
url:"传给谁",
data:(参数),
type:"post/get",
dateType:"html/text/json",
success:function(data){
},
error:function(msg){
}
});

注册页面，以及失去焦点验证用户名是否存在

 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="utf-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
 8 <title>Insert title here</title>
 9 <script type="text/javascript">
10 $(function() {
11     $("#btn_log").click(function() {
12         $.ajax({
13             type:"post",
14             url:"ZhueServlet",
15             data:$("#formdata").serializeArray(),
16             dataType:"json",//返回的
17             success:function(data) {
18                 if(data.success) {
19                     window.location.href="denglu.jsp";
20                 } else {
21                     alert(data.msg);//打印相应的错误信息
22                 }
23             },
24             error:function(msg) {
25                 cosole.log(msg);
26             }
27         });
28     });
29     
30     // 失去焦点验证用户名是否存在
31     $("#username").blur(function() {
32         var u_val = $("#username").val();
33         
34         $.ajax({
35             type:"post",
36             url:"CheckUsername",
37             data:{username:u_val},
38             dataType:"text",
39             success:function(data) {
40                 if("no" == data) {
41                     $("#msg").html("用户名已经存在");
42                 } else if("ok"==data) {
43                     $("#msg").html("该用户名可以使用 !");
44                 }
45             },
46             error:function(msg) {
47                 cosole.log(msg);//在控制台打印错误信息48             }
49         });
50     });
51 });
52 </script>
53 </head>
54 <body>
55     
56     <form id="formdata">
57         用户名：<input id="username" type="text" name="username"><span id="msg"></span><br>
58         密码：<input type="password" name="password"><br>
59         确认密码：<input type="password" name="password1"><br>
60         真实姓名：<input type="text" name="realname"><br>
61         <a  id="btn_log" href="#">提交</a>><br>
62     </form>
63 </body>
64 </html>
 1 //注册逻辑
 2 package com.servlet;
 3 
 4 import java.io.IOException;
 5 import javax.servlet.ServletException;
 6 import javax.servlet.annotation.WebServlet;
 7 import javax.servlet.http.HttpServlet;
 8 import javax.servlet.http.HttpServletRequest;
 9 import javax.servlet.http.HttpServletResponse;
10 import com.util.MethodDal;
11 import com.util.User;
12 
13 /**
14  * Servlet implementation class ZhueServlet
15  */
16 @WebServlet("/ZhueServlet")
17 public class ZhueServlet extends HttpServlet {
18     
19     private static final long serialVersionUID = 1L;
20        
21     /**
22      * @see HttpServlet#HttpServlet()
23      */
24     public ZhueServlet() {
25         super();
26         // TODO Auto-generated constructor stub
27     }
28 
29     /**
30      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
31      */
32     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
33         //首先设置可以处理中文
34         request.setCharacterEncoding("utf-8");
35         response.setCharacterEncoding("utf-8");
36         response.setContentType("text/html; charset=utf-8");
37         //获取传入的数据
38         String username=request.getParameter("username");
39         String password=request.getParameter("password");
40         String password1=request.getParameter("password1");
41         String realname=request.getParameter("realname");
42         
43         System.out.println("a:"+username+password);
44         //调用方法判断传入的参数有没有空，都不为空才可以执行下去
45         if(checkParam(username,password,password1)){
46             if(password.equals(password1)){
47                 MethodDal m=new MethodDal();
48                 if(m.selectName(username).equals("no")){//调用方法根据用户名查询，如果返回no说明数据库没有此用户名，可以注册
49                     User user=new User();//实例化用户类并添加信息
50                     user.setUsername(username);
51                     user.setPassword(password);
52                     m.insertData(user);//将实例化的用户传到添加用户的方法
53                     response.getWriter().append("{\"success\":true}");//返回键值对，做相关判断，输出相关信息
54                 }else{
55                     response.getWriter().append("{\"success\":false, \"msg\":\"1请正确输入\"}");
56                 }
57             }else{
58                 response.getWriter().append("{\"msg\":\"2请正确输入\"}");
59             }
60         }else{
61             response.getWriter().append("{\"msg\":\"3请正确输入\"}");
62         }
63     }
64 
65     /**
66      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
67      */
68     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
69         // TODO Auto-generated method stub
70         doGet(request, response);
71     }
72     //判断传入的参数有没有空的方法，只要有空的就返回false
73     public boolean checkParam(String... args){//这样传参数代表参数个数不确定，传几个都可以
74         for(String s : args){
75             if("".equals(s)||s==null){
76                 return false;
77             }
78         }
79         return true;
80     }
81 }

案例：省市区三级联动

准备util工具包，数据库链接设置，数据库操作工具类

 1 package com.util;
 2 //数据库设置
 3 import java.sql.Connection;
 4 import java.sql.DriverManager;
 5 import java.sql.ResultSet;
 6 import java.sql.SQLException;
 7 import java.sql.Statement;
 8 
 9 /**
10  * 数据库驱动连接类
11  * @author ZBK
12  */
13 public class DBHelper {
14     /**
15      * 数据库用户名
16      */
17     public static final String USERNAME = "test";
18     /**
19      * 数据库密码
20      */
21     public static final String PASSWORD = "test";
22     /**
23      * 数据库驱动类
24      */
25     public static final String DRIVER = "oracle.jdbc.OracleDriver";
26     /**
27      * 数据库地址URL
28      */
29     public static final String URL = "jdbc:oracle:thin:@localhost:1521:xe";
30 
31     /**
32      * 获取数据库连接
33      * @return
34      */
35     public static Connection getConnection() {
36         Connection conn = null;
37         try {
38             Class.forName(DRIVER);
39             conn = DriverManager.getConnection(URL, USERNAME, PASSWORD);
40         } catch (ClassNotFoundException e) {
41             e.printStackTrace();
42         } catch (SQLException e) {
43             e.printStackTrace();
44         }
45         return conn;
46     }
47 
48     /**
49      * 释放资源
50      * @param conn 数据库连接对象
51      * @param sm Statement对象
52      * @param rs ResultSet结果集对象
53      */
54     public static void destroy(Connection conn, Statement sm, ResultSet rs) {
55         if (conn != null) {
56             try {
57                 conn.close();
58             } catch (SQLException e) {
59                 e.printStackTrace();
60             }
61             conn = null;
62         }
63         if (sm != null) {
64             try {
65                 sm.close();
66             } catch (SQLException e) {
67                 e.printStackTrace();
68             }
69             sm = null;
70         }
71         if (rs != null) {
72             try {
73                 rs.close();
74             } catch (SQLException e) {
75                 e.printStackTrace();
76             }
77             rs = null;
78         }
79     }
80 
81     /**
82      * 验证前台传入的参数是否为空
83      * @param args
84      * @return
85      */
86     public static boolean checkParam(String... args) {
87         for (String s : args) {
88             if (s == null || s.trim().length() < 1) {
89                 return false;
90             }
91         }
92         return true;
93     }
94 }
  1 package com.util;
  2 
  3 import java.sql.Connection;
  4 import java.sql.PreparedStatement;
  5 import java.sql.ResultSet;
  6 import java.sql.SQLException;
  7 import java.util.ArrayList;
  8 import java.util.List;
  9 
 10 import com.model.Area;
 11 import com.model.City;
 12 import com.model.Province;
 13 
 14 public class DataBaseUtil {
 15     private Connection conn;
 16     private PreparedStatement ps;
 17     private ResultSet rs;
 18 
 19     /**
 20      * 初始化数据库链接
 21      */
 22     public void init(String sql) {
 23         conn = DBHelper.getConnection();
 24         try {
 25             ps = conn.prepareStatement(sql);
 26         } catch (SQLException e) {
 27             e.printStackTrace();
 28         }
 29     }
 30 
 31     /**
 32      * 查询所有省信息
 33      * 
 34      */
 35     public List<Province> SelectAllPro() {
 36         String sql = "select * from C_PROVINCES t";
 37         init(sql);
 38         List<Province> plist = null;
 39         try {
 40             rs = ps.executeQuery();
 41             if(rs != null) {
 42                 plist = new ArrayList<Province>();
 43                 while(rs.next()) {
 44                     Province p = new Province();
 45                     p.setId(rs.getInt("id"));
 46                     p.setProvince(rs.getString("province"));
 47                     p.setProvinceid(rs.getString("provinceid"));
 48                     plist.add(p);
 49                 }
 50             }
 51         } catch (SQLException e) {
 52             e.printStackTrace();
 53         }
 54         
 55         return plist;
 56     }
 57 
 58     public List<City> SelectCity(String provinceid) {
 59         String sql = "select * from C_CITIES t where t.provinceid=?";
 60         init(sql);
 61         List<City> clist = null; 
 62         try {
 63             ps.setString(1, provinceid);
 64             rs = ps.executeQuery();
 65             if(rs!=null) {
 66                 clist = new ArrayList<City>();
 67                 while(rs.next()) {
 68                     City city = new City();
 69                     city.setId(rs.getInt("id"));
 70                     city.setCity(rs.getString("city"));
 71                     city.setCityid(rs.getString("cityid"));
 72                     city.setProvinceid(rs.getString("provinceid"));
 73                     clist.add(city);
 74                 }
 75             }
 76         } catch (SQLException e) {
 77             e.printStackTrace();
 78         }
 79         
 80         return clist;
 81     }
 82 
 83     public List<Area> SelectArea(String cityid) {
 84         String sql = "select * from C_AREAS t where t.cityid=?";
 85         init(sql);
 86         List<Area> alist = null; 
 87         try {
 88             ps.setString(1, cityid);
 89             rs = ps.executeQuery();
 90             if(rs!=null) {
 91                 alist = new ArrayList<Area>();
 92                 while(rs.next()) {
 93                     Area a = new Area();
 94                     a.setId(rs.getInt("id"));
 95                     a.setArea(rs.getString("area"));
 96                     a.setAreaid(rs.getString("areaid"));
 97                     a.setCityid(rs.getString("cityid"));
 98                     alist.add(a);
 99                 }
100             }
101         } catch (SQLException e) {
102             e.printStackTrace();
103         }
104         
105         return alist;
106     }
107 }

准备model包，包含省市区三个类

 1 package com.model;
 2 
 3 public class Province {
 4     private int id;
 5     private String provinceid;
 6     private String province;
 7 
 8     public int getId() {
 9         return id;
10     }
11 
12     public void setId(int id) {
13         this.id = id;
14     }
15 
16     public String getProvinceid() {
17         return provinceid;
18     }
19 
20     public void setProvinceid(String provinceid) {
21         this.provinceid = provinceid;
22     }
23 
24     public String getProvince() {
25         return province;
26     }
27 
28     public void setProvince(String province) {
29         this.province = province;
30     }
31 
32     @Override
33     public String toString() {
34         return "Province [id=" + id + ", provinceid=" + provinceid + ", province=" + province + "]";
35     }
36 
37 }
 1 package com.model;
 2 
 3 public class City {
 4     private int id;
 5     private String cityid;
 6     private String city;
 7     private String provinceid;
 8 
 9     public int getId() {
10         return id;
11     }
12 
13     public void setId(int id) {
14         this.id = id;
15     }
16 
17     public String getCityid() {
18         return cityid;
19     }
20 
21     public void setCityid(String cityid) {
22         this.cityid = cityid;
23     }
24 
25     public String getCity() {
26         return city;
27     }
28 
29     public void setCity(String city) {
30         this.city = city;
31     }
32 
33     public String getProvinceid() {
34         return provinceid;
35     }
36 
37     public void setProvinceid(String provinceid) {
38         this.provinceid = provinceid;
39     }
40 
41     @Override
42     public String toString() {
43         return "City [id=" + id + ", cityid=" + cityid + ", city=" + city + ", provinceid=" + provinceid + "]";
44     }
45 
46 }
 1 package com.model;
 2 
 3 public class Area {
 4     private int id;
 5     private String areaid;
 6     private String area;
 7     private String cityid;
 8     public int getId() {
 9         return id;
10     }
11     public void setId(int id) {
12         this.id = id;
13     }
14     public String getAreaid() {
15         return areaid;
16     }
17     public void setAreaid(String areaid) {
18         this.areaid = areaid;
19     }
20     public String getArea() {
21         return area;
22     }
23     public void setArea(String area) {
24         this.area = area;
25     }
26     public String getCityid() {
27         return cityid;
28     }
29     public void setCityid(String cityid) {
30         this.cityid = cityid;
31     }
32     @Override
33     public String toString() {
34         return "Area [id=" + id + ", areaid=" + areaid + ", area=" + area + ", cityid=" + cityid + "]";
35     }
36 }

准备处理逻辑，三个Servlet

 1 package com.servlet;
 2 
 3 import java.io.IOException;
 4 import java.util.List;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.annotation.WebServlet;
 8 import javax.servlet.http.HttpServlet;
 9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 
12 import com.model.Province;
13 import com.util.DataBaseUtil;
14 
15 /**
16  * Servlet implementation class SelectAllProServlet
17  */
18 @WebServlet("/SelectAllProServlet")
19 public class SelectAllProServlet extends HttpServlet {
20     private static final long serialVersionUID = 1L;
21        
22     /**
23      * @see HttpServlet#HttpServlet()
24      */
25     public SelectAllProServlet() {
26         super();
27         // TODO Auto-generated constructor stub
28     }
29 
30     /**
31      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
32      */
33     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
34         response.setCharacterEncoding("utf-8");
35         //初始化数据库操作类
36         DataBaseUtil db = new DataBaseUtil();
37         
38         List<Province> plist = db.SelectAllPro();
39 
40         String json = "{\"success\":";
41 
42         if (plist != null) {
43             json += "true,\"result\":";//result是一个键，他得值是后面的数组，这个数组包含了一串键值对
44             json += "[";
45             for (int i = 0; i < plist.size(); i++) {
46                 json += "{\"id\":\"" + plist.get(i).getId() + "\",\"province\":\"" + plist.get(i).getProvince()
47                         + "\",\"provinceid\":\"" + plist.get(i).getProvinceid() + "\"}";
48                 if (i != plist.size() - 1) {
49                     json += ",";
50                 }
51             }
52             json += "]}";
53         } else {
54             json += "false}";
55         }
56         response.getWriter().append(json);
57     }
58 
59     /**
60      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
61      */
62     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
63         // TODO Auto-generated method stub
64         doGet(request, response);
65     }
66 
67 }
 1 package com.servlet;
 2 
 3 import java.io.IOException;
 4 import java.util.List;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.annotation.WebServlet;
 8 import javax.servlet.http.HttpServlet;
 9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 
12 import com.alibaba.fastjson.JSONObject;
13 import com.model.City;
14 import com.util.DataBaseUtil;
15 
16 /**
17  * Servlet implementation class SelectCityServlet
18  */
19 @WebServlet("/SelectCityServlet")
20 public class SelectCityServlet extends HttpServlet {
21     private static final long serialVersionUID = 1L;
22        
23     /**
24      * @see HttpServlet#HttpServlet()
25      */
26     public SelectCityServlet() {
27         super();
28         // TODO Auto-generated constructor stub
29     }
30 
31     /**
32      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
33      */
34     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
35         response.setCharacterEncoding("utf-8");
36 
37         String provinceid = request.getParameter("provinceid");
38         
39         DataBaseUtil db = new DataBaseUtil();
40 
41         List<City> clist = db.SelectCity(provinceid);
42         /*
43          * 拼接字符串传回json
44          * System.out.println(provinceid);
45         String json = "{\"success\":";
46 
47         if (clist != null) {
48             json += "true,\"result\":";
49             json += "[";
50             for (int i = 0; i < clist.size(); i++) {
51                 json += "{\"id\":\"" + clist.get(i).getId() + "\",\"city\":\"" + clist.get(i).getCity()
52                         + "\",\"cityid\":\"" + clist.get(i).getCityid() + "\"}";
53                 if (i != clist.size() - 1) {
54                     json += ",";
55                 }
56             }
57             json += "]}";
58         } else {
59             json += "false}";
60         }
61             
62         response.getWriter().append(json);*/
63         //导包调用方法，传回json
64         JSONObject jo = new JSONObject();
65         
66         if(clist!=null) {
67             jo.put("success", true);
68             jo.put("result", clist);
69         } else {
70             jo.put("success", false);
71         }
72         response.getWriter().append(jo.toJSONString());
73     }
74 
75     /**
76      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
77      */
78     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
79         // TODO Auto-generated method stub
80         doGet(request, response);
81     }
82 
83 }
 1 package com.servlet;
 2 
 3 import java.io.IOException;
 4 import java.util.List;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.annotation.WebServlet;
 8 import javax.servlet.http.HttpServlet;
 9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 
12 import com.alibaba.fastjson.JSONObject;
13 import com.model.Area;
14 import com.model.City;
15 import com.util.DataBaseUtil;
16 
17 /**
18  * Servlet implementation class SelectareaServlet
19  */
20 @WebServlet("/SelectareaServlet")
21 public class SelectareaServlet extends HttpServlet {
22     private static final long serialVersionUID = 1L;
23        
24     /**
25      * @see HttpServlet#HttpServlet()
26      */
27     public SelectareaServlet() {
28         super();
29         // TODO Auto-generated constructor stub
30     }
31 
32     /**
33      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
34      */
35     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
36         response.setCharacterEncoding("utf-8");
37 
38         String cityid = request.getParameter("cityid");
39         
40         DataBaseUtil db = new DataBaseUtil();
41 
42         List<Area> alist = db.SelectArea(cityid);
43         JSONObject jo = new JSONObject();
44         
45         if(alist!=null) {
46             jo.put("success", true);
47             jo.put("result", alist);
48         } else {
49             jo.put("success", false);
50         }
51         response.getWriter().append(jo.toJSONString());
52         
53     }
54 
55     /**
56      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
57      */
58     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
59         // TODO Auto-generated method stub
60         doGet(request, response);
61     }
62 
63 }

准备页面和ajax

 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="utf-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
 8 <script type="text/javascript" src="js/index.js"></script>
 9 <title>Insert title here</title>
10 <style type="text/css">
11     #pdiv{
12         margin:30px auto;
13         width:600px;
14         height:auto;
15         border:1px black solid;
16     }
17 </style>
18 </head>
19 <body>
20 <div id="pdiv">
21     <select id="province"></select>
22     <select id="city"></select>
23     <select id="area"></select>
24 </div>
25 </body>
26 </html>
 1 $(function() {
 2     //访问页面显示省的信息
 3     $.ajax({
 4         type:"post",
 5         url:"SelectAllProServlet",
 6         //data此处不需要
 7         dataType:"json",
 8         success : function(data) {
 9             if (data.success) {
10                 $("#province").append("<option vlaue='-1'>==请选择==</option>");//初始化下拉框
11                 $("#city").append("<option vlaue='-1'>==请选择==</option>");//初始化下拉框
12                 $("#area").append("<option vlaue='-1'>==请选择==</option>");//初始化下拉框
13                 for (var i = 0; i < data.result.length; i++) {
14                     $("#province").append(
15                             "<option value='" + data.result[i].provinceid
16                                     + "'>" + data.result[i].province
17                                     + "</option>");
18                 }
19 
20             } else {
21                 alert("后台没有取出数据 !");
22             }
23         },
24         error : function(msg) {
25             console.log(msg);
26         }
27     });
28 
29 
30 // 加载市级
31 $("#province").change(
32         function() {
33             $("#area").empty();//清空，否则会导致多次查询的堆积起来
34             $("#area")
35                     .append("<option value='-1'>请选择</option>");
36             var provinceid = $(this).val();
37             $.ajax({
38                 type : "post",
39                 url : "SelectCityServlet",
40                 data : {
41                     provinceid : provinceid//传出的参数类型是provinceid，值是provinceid
42                 },
43                 dataType : "json",
44                 success : function(data) {
45                     if (data.success) {
46                         $("#city").empty();
47                         $("#city")
48                                 .append("<option value='-1'>请选择</option>");
49                         for (var i = 0; i < data.result.length; i++) {
50                             $("#city").append(
51                                     "<option value='"
52                                             + data.result[i].cityid + "'>"
53                                             + data.result[i].city
54                                             + "</option>");
55                         }
56                     } else {
57                         alert("后台没有取出数据 !");
58                     }
59                 },
60                 error : function(msg) {
61                     console.log(msg);
62                 }
63             });
64         });
65 
66 
67 // 加载区
68 $("#city").change(
69         function() {
70             var cityid = $(this).val();
71             $.ajax({
72                 type : "post",
73                 url : "SelectareaServlet",
74                 data : {
75                     cityid : cityid
76                 },
77                 dataType : "json",
78                 success : function(data) {
79                     if (data.success) {
80                         $("#area").empty();//清空，否则会导致多次查询的堆积起来
81                         $("#area")
82                                 .append("<option value='-1'>请选择</option>");
83                         for (var i = 0; i < data.result.length; i++) {
84                             $("#area").append(
85                                     "<option value='"
86                                             + data.result[i].areaid + "'>"
87                                             + data.result[i].area
88                                             + "</option>");
89                         }
90                     } else {
91                         alert("后台没有取出数据 !");
92                     }
93                 },
94                 error : function(msg) {
95                     console.log(msg);
96                 }
97             });
98         });
99 });

 

posted @ 2017-09-01 08:48  谁将新樽辞旧月，今月曾经照古人  阅读(11160)  评论(2)  编辑  收藏  举报