【2017-06-05】Jquery.ajax

標籤：ati   update   png   username   res   turn   cti   this   ashx   

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=\"修改\"/>&nbsp;&nbsp;<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