原生态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; }
    }