原生態ajax 傳遞json參數到服務器端

案例說明：通過ajax將用戶名和密碼以json形式傳遞給服務器端，然后服務器端接受數據，進行處理返回json數據到前端

 

首先，在客戶端，通過JavaScript腳本將頁面表單數據封裝成JSON格式。LoginAjax()函數完成了這一功能。然后我們通過ajax將數據發送到服務端的login.ashx。其中用到了JSON.stringify()方法，它可以將客戶端發送的JSON數據對象進行序列化操作，詳細的內容可以看這里https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

//通過ajax調用后台服務端程序，進行數據校驗
function LoginAjax(accountName, password) {
    var httphtml;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari  
        httphtml = new XMLHttpRequest();
    } else {
        // code for IE6, IE5  
        httphtml = new ActiveXObject("Microsoft.XMLHTTP");
    }

    if (!httphtml) {
        alert("httphtml異常");
        returnfalse;
    }
    //將賬戶名和密碼進行編碼傳遞，放置數據亂碼

    //方法一，通過問號傳遞
    // httphtml.open("POST", "Login.ashx?accountName=" + encodeURI(accountName) + "&password=" + encodeURI(password), false);
    var postData = { "accountName": accountName, "password": password };
    //異步 - True 或 False？
    httphtml.open("POST", "Login.ashx", true);
    httphtml.onreadystatechange = function () {

        /*
        存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
        0: 請求未初始化
        1: 服務器連接已建立
        2: 請求已接收
        3: 請求處理中
        4: 請求已完成，且響應已就緒
        */
        if (httphtml.readyState == 4) {
            /*
            200: "OK"
            404: 未找到頁面
            */
            if (httphtml.status == 200) {
                //將ajax請求處理后返回的值顯示出來
                var value = httphtml.responseText;
                //函數eval對json格式字符串進行反序列化操作。
                var obj = eval("(" + value + ")");
                if (obj.state == "1") {
                    alert(obj.msg);
                }
                else {
                    alert(obj.msg);
                }

            } else {
                alert("ajax請求錯誤！");
            }
        }

    }
    //有兩種辦法處理：第一種方式是   用來將對象序列化為JSON字符串(JSON.stringify())，

    //第二種方式是直接用雙引號包裹起來，比如data: "{'accountName':'foovalue', 'password':'barvalue'}"。
    var data = JSON.stringify(postData);
    //將請求發送到服務器。參數string僅用於POST請求；
    httphtml.send(data);
}

Login.ashx服務端接收返回

 /// <summary>
    /// Login 的摘要說明
    /// 用戶名默認   admin
    /// 密碼默認    123456
    /// </summary>
    public class Login : IHttpHandler
    {
        
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            var data = context.Request;
            var sr = (new StreamReader(data.InputStream)).ReadToEnd();
            var javaScriptSerializer = new JavaScriptSerializer();
            User PostedData = javaScriptSerializer.Deserialize<User>(sr);

            string returnValue = "error";
            //校驗用戶名和密碼是否為空
            if (!string.IsNullOrEmpty(PostedData.accountName) && !string.IsNullOrEmpty(PostedData.password))
            {
                //
                //備注：通過ajax傳遞參數進行編碼方式亂碼
                //將獲取的值進行解碼   
                string accountName = PostedData.accountName;// System.Web.HttpUtility.UrlDecode(context.Request["accountName"].ToString());
                string password = PostedData.password;// System.Web.HttpUtility.UrlDecode(context.Request["password"].ToString());
                if (!accountName.Equals("admin"))
                {
                    returnValue = "{\"state\":\"0\",\"msg\":\"賬號不正確\"}"; //"賬號不正確！";
                }
                else if (!password.Equals("123456"))
                {
                    returnValue = "{\"state\":\"0\",\"msg\":\"密碼不正確\"}"; //"密碼不正確";
                }
                else
                {
                    returnValue = "{\"state\":\"0\",\"msg\":\"恭喜你，登錄成功\"}"; ;
                }
            }
            context.Response.Write(returnValue);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
    public class User {
        public string accountName { get; set; }
        public string password { get; set; }
    }