JavaWeb 之 AJAX

時間 2019-11-26

標籤 javaweb ajax 欄目 Java 简体版

原文原文鏈接

Ajax

ajax：AJAX 是與服務器交換數據的藝術，它在不重載所有頁面的狀況下，實現了對部分網頁的更新

AJAX：Asynchronous JavaScript and XML，異步 javascript和 XML，帶來用戶體驗改變，是web優化一種主要手段javascript

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

傳統web交互模型，瀏覽器直接將請求發送給服務器，服務器回送響應，直接發給瀏覽器， Ajax交互模型，瀏覽器首先將請求發送 Ajax引擎（以XMLHttpRequest爲核心），AJax引擎再將請求發送給服務器，服務器回送響應先發給Ajax引擎，再由引擎傳給瀏覽器顯示html

一、同步交互模式，客戶端提交請求，等待，在響應回到客戶端前，客戶端沒法進行其餘操做java

二、異步交互模型，客戶端將請求提交給Ajax引擎，客戶端能夠繼續操做，由Ajax引擎來完成與服務武器端通訊，當響應回來後，Ajax引擎會更新客戶頁面，在客戶端提交請求後，用戶能夠繼續操做，而無需等待。jquery

Google ： suggest建議、郵件定時保存、map地圖web

jQuery 與 AJAX

jQuery 提供多個與 AJAX 有關的方法。ajax

經過 jQuery AJAX 方法，咱們可以使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您可以把這些外部數據直接載入網頁的被選元素中。sql

四種Ajax數據庫

1.json

$("").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>

$.get(...);
3.

$.post(...);

兩種在客戶端和服務器端進行請求-響應的經常使用方法是：GET 和 POST。

GET - 從指定的資源請求數據
POST - 向指定的資源提交要處理的數據

GET 基本上用於從服務器得到（取回）數據。註釋：GET 方法可能返回緩存數據。

POST 也可用於從服務器獲取數據。不過，POST 方法不會緩存數據，而且經常使用於連同請求一塊兒發送數據。

$.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 });

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。