案例说明：通过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(""))
{
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; }
}