【2017-06-05】Jquery.ajax
AJAX 是一種網頁數據異步加載技術
通過在後臺與服務器進行少量數據交換,AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。
一、Json
註意Json裏面不可出現單引號,要用雙引號轉義。
xml --- 可擴展的標記語言。
Json是一種跨語言的數據傳遞格式
Json對象格式:"{"key1":"value1","key2":"value2","key3":"value3"}"
註意:最後一個key:value後邊不能加逗號
Json數組格式:"[{},{},{}]"
註意:數組格式最後一個Json對象後邊也不能加逗號。每一個{}都是一個Json對象
二、ashx 一般處理程序
只有後臺部分,用於數據處理。
只需要操作ProcessRequst這個方法裏面的內容,如需引用命名空間,則在最頂部引用,其他內容不需要操作。
引Linq命名空間 using System.Linq;
引泛型集合命名空間 Using System.Collections.Generic;
引用StringBuilder的命名空間 Using System.Text;
所有的內置對象在ashx裏都要通過context來點出來。
獲取Json中傳來的數據
string s =context.Requst["key"];
將返還數據拼成Json結構:
1、Json對象
string end="{\"has\":\"false\"}";
2、Json數組
StringBuilder str = new StringBuilder();
str.Append("[");
str.Append("{\"key1\":\"value1\",\"key2\":\"value2\",\"key3\":\"value3\"}");
str.Append("]");
將要返回的Json數據返回出去
context.Response.Write(end); 或者 context.Response.Write(str);
context.Response.End();
三、Ajax基本結構 (前臺Js部分)
$.ajax({
url:"Insert.ashx", 要提交到的服務端的相對路徑。
type:"post",
data:{"key":"value","key":"value","key":"value"}, key與服務端接受的key一致。
dataType:"json",
success:function(msg){ 處理完畢的回調。()內一般寫data或者msg,代表返還的Json數據對象,
alert(msg.has); 通過這個對象可以點出對象對應的屬性獲取對應的值。
}
});
<script type="text/javascript"> $("#txt1").keyup(function () { var s = $(this).val(); //取文本框的值 if (s.length < 6) { $("#txt1_msg").text("用戶名不可以小於6位!"); return; //當文本框的值不夠6位時,不進入AJAX } $.ajax({ url: "Handler.ashx", data: { "uname": s }, //提交的數據,(k:v) k 與例1對應 type: "post", dataType: "json", success: function (msg) { if (msg.has == ‘false‘) { $("#txt1_msg").text("恭喜!用戶名可用!"); $("#txt1_msg").css(‘color‘,‘green‘); } else { $("#txt1_msg").text("用戶名已被占用!"); $("#txt1_msg").css(‘color‘, ‘red‘); } } }); });
解析Json數組來展示數據:
function DataLoad() { $.ajax({ url: "LoadData.ashx", data: {}, type: "post", dataType: "json", success: function (msg) { //先清空<tbody></tbody>裏面的html代碼 $("#tbody1").empty(); //循環創建行數據 for (var i = 0; i < msg.length; i++) { var str = "<tr style=\"background-color: white;\">"; str += "<td>" + msg[i].ids + "</td>"; str += "<td>" + msg[i].username + "</td>"; str += "<td>" + msg[i].password + "</td>"; str += "<td>" + msg[i].nickname + "</td>"; str += "<td>" + msg[i].sex + "</td>"; str += "<td>" + msg[i].birthday + "</td>"; str += "<td>" + msg[i].nation + "</td>"; str += "<td><input type=\"button\" class=\"btn_update\" name=\"" + msg[i].ids + "\" onclick=\"update(" + msg[i].ids + ")\" value=\"修改\"/> <input type=\"button\" name=\"" + msg[i].ids + "\" onclick=\"deletes(" + msg[i].ids + ")\" class=\"btn_delete\" value=\"刪除\"/></td>"; str += "</tr>"; //將創建的行數據追加到<tbody></tbody>裏 $("#tbody1").append(str); } } }); }
【2017-06-05】Jquery.ajax