ajax連接數據庫加載
ajax是指一種創建交互式網頁應用的網頁開發技術。
AJAX = 異步JS和XML(標准通用標記語言的子集)。
AJAX 是一種用於創建快速動態網頁的技術。
通過在后台與服務器進行少量數據交換,AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。
傳統的網頁(不使用 AJAX)如果需要更新內容,必須重載整個網頁頁面。
優點:是在不重新加載整個頁面的情況下,可以與服務器交換數據並更新部分網頁內容。
不需要任何瀏覽器插件,但需要用戶允許JavaScript在瀏覽器上執行。
1.創建AJAX
點擊按鈕加載數據。
.新建一個LINQ to SQL 類,將User表和Nation表拉到類中
創建一個 web窗體 或者純html界面 +一個一般處理程序LoadUserajax.ashx
(1)body內代碼
1 <table id="tb1" style=" text-align: center; width: 100%;"> 2 <thead> 3 <tr style="color: #ff6a00;"> 4 <td>用戶名</td> 5 <td>密碼</td> 6 <td>昵稱</td> 7 <td>性別</td> 8 <td>生日</td> 9 <td>年齡</td> 10 <td>民族</td> 11 </tr> 12 </thead> 13 <tbody> 14 </tbody> 15 </table> 16 <input type="button" value="加載" id="btn1" />
(2)js代碼部分
1 <script> 2 //點擊加載按鈕 3 $("#btn1").click(function () { 4 //編寫ajax語句,將數據提交到某個服務端去 5 $.ajax({ 6 url: "ajax/LoadUserajax.ashx",//將數據要提交到哪個服務端 7 data: {},//將什么數據提交到服務端去,{}內基本格式為"key":"要傳的數據" 8 type: "post",//用什么樣的方式將數據提交過去 9 dataType: "json",//返回一個什么樣的數據類型 10 //請求完成 11 success: function (data) { 12 $("#tb1 tbody").empty();//清空tbody 13 for (i in data) { 14 var str = "<tr style=\"\">"; 15 str += "<td>" + data[i].username + "</td>"; 16 str += "<td>" + data[i].password + "</td>"; 17 str += "<td>" + data[i].nickname + "</td>"; 18 str += "<td>" + data[i].sex + "</td>"; 19 str += "<td>" + data[i].birthday + "</td>"; 20 str += "<td>" + data[i].age + "</td>"; 21 str += "<td>" + data[i].nation + "</td>"; 22 str += "</tr>"; 23 $("#tb1 tbody").append(str); 24 } 25 },//success 26 //請求失敗 27 error: function () { 28 alert('服務器連接失敗!!!'); 29 } 30 });//ajax 31 });//btn1.click 32 </script>
(3)userajax.ashx內代碼
1 <%@ WebHandler Language="C#" Class="userajax" %> 2 3 using System; 4 using System.Web; 5 using System.Collections; 6 using System.Collections.Generic; 7 using System.Linq; 8 using System.Text; 9 10 public class userajax : IHttpHandler 11 { 12 13 public void ProcessRequest(HttpContext context) 14 { 15 //有數據接收時,用context.Request["key"];將ajax傳過來的數據取出來 16 int count = 0;//前面是否有數據 17 string end = "[";//創建json對象,設置默認值,基本格式為{"key":"value","":"","":""},有多條時用[]括住,每條之間用,隔開 18 using (WebDataContext con = new WebDataContext()) 19 { 20 List<User> ulist = con.User.ToList(); 21 foreach (User u in ulist) { 22 //前面有數據 23 if (count>0) { 24 end += ","; 25 } 26 end += "{\"username\":\""+u.UserName+"\",\"password\": \""+u.PassWord+"\",\"nicknane\":\""+u.NickName+"\",\"sex\": \""+u.SexStr+"\",\"birthday\": \""+u.BirStr+"\",\"age\":\""+u.Age+"\",\"nation\":\""+u.NationName+"\" }"; 27 count++; 28 } 29 } 30 end += "]"; 31 context.Response.Write(end); 32 context.Response.End(); 33 34 } 35 36 public bool IsReusable 37 { 38 get 39 { 40 return false; 41 } 42 } 43 44 }
2.json與xml
xml和json的作用:在不同語言之間進行數據傳遞
最早使用的數據類型是 xml
劣勢:
1、代碼量較大
2、結構不清晰
3、解析起來麻煩
現在使用的數據類型是 json
優勢:
1、結構清晰
2、類似於面向對象的解析方式
json基本格式:
{"key":"value","":"","":""}
{"username":"","password":"","nickname":"","sex":"","birthday":"","nation":""}
-------------------------------------------------------
三級聯動 不刷新界面
1.創建三個
DropDownList
2.js
bind1($("#DropDownList1"), '0001', '1'); function bind1(drop, pc, key) { $.ajax({ url: "ajax/china.ashx", data: { "pcode": pc }, type: "post", dataType: "json", success: function (data) { drop.empty(); for (i in data) { var str = "<option value=\"" + data[i].code + "\">" + data[i].name + "</option>"; drop.append(str); } if (key == "1") { bind1($("#DropDownList2"), $("#DropDownList1").val(), '2'); } if (key == "2") { bind1($("#DropDownList3"), $("#DropDownList2").val(), '3'); } }, error: function () { alert('服務器連接失敗!'); } }); } $("#DropDownList1").change(function () { bind1($("#DropDownList2"), $(this).val(), '2'); }); $("#DropDownList2").change(function () { bind1($("#DropDownList3"), $(this).val(), '3'); });
3.一般處理程序
using System; using System.Web; using System.Collections; using System.Collections.Generic; using System.Linq; using System.Text; public class china : IHttpHandler { public void ProcessRequest (HttpContext context) { string pcode = context.Request["pcode"]; StringBuilder end = new StringBuilder(); int count = 0; end.Append("["); using (mydbDataContext con = new mydbDataContext()) { List<ChinaStates> clist = con.ChinaStates.Where(r => r.ParentAreaCode == pcode).ToList(); foreach (ChinaStates c in clist) { if (count > 0) end.Append(","); end.Append("{\"code\":\""+c.AreaCode+"\",\"name\":\""+c.AreaName+"\"}"); count++; } } end.Append("]"); context.Response.Write(end); context.Response.End(); } public bool IsReusable { get { return false; } } }