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 有關的方法。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>
2.
$.get(...);
3.
$.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 });