前段时间有点跑偏，经过米老师和师傅的耐心指导，终于认识到自己的问题，现在回归常规路线，继续B/S的学习。
经过近半个月的熏陶，对JQuery慢慢的有了亲切感。当时我采访过一清，问他看完JQuery视频有什么感觉，一清说：“能听懂，能看懂，自己做不知道从哪下手”。这可能是大多数初学者的苦衷，现在我用一个简单的登录页面，帮助大家进一步理解JQuery.Ajax的工作原理。
首先我们制作一个html页面，用于和用户交互，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/login.js" type="text/javascript"></script>
</head>
<body>
用户名：<input type="text" id="userName" /><br />
密 码：<input type="text" id="passWord" /><br />
<input type="button" id="login" value="登录"/>
</body>
</html>
然后我们用JQuery为html的登录按钮绑定点击事件，代码如下：
//在窗体加载时，为登录按钮绑定点击事件
$(document).ready(function () {
$("#login").click(function () {
$.post('login.ashx', {
//参数一：用户名
userName: $("#userName").val(),
//参数二：密码
passWord: $("#passWord").val()
},
//回调函数
function (data) {
//输出结果
alert(data);
},
//返回类型
"text"
);
});
});
JQuery.post(url,[data],[callback],[type])用于和服务器交互，它有4个参数，url：告诉Ajax将数据提交到哪个页面进行处理，data：在提交过程中需要传递的参数，callback：回调函数，用于接收服务器的返回值，type：返回值的类型，一般为text或Json。
接着是用一般处理程序login.ashx(服务器)处理JQuery.Ajax通过post方法提交的请求，代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Demo
{
/// <summary>
/// login 的摘要说明
/// </summary>
public class login : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//接收Ajax传入的参数
string userName = context.Request["userName"].ToString();
string passWord = context.Request["passWord"].ToString();
//将Ajax传入的参数做出判断后传回到Ajax
if (userName == "admin" && passWord == "admin")
{
context.Response.Write("登录成功");
}
else
{
context.Response.Write("登录失败!");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
最后我们查看Demo运行效果：
通过两次登录过程我们可以发现，当用户名、密码都是“1”的时候，弹框是“登录失败”；当用户名、密码都是“admin”的时候，弹框是“登录成功”。
回首整个实现过程，我们不难发现，JQuery.Ajax接收页面用户输入的值，然后通过post方法提交到后台服务器，后台服务器接收post提交的请求，进行处理，处理完后再回传到Ajax，JQuery.Ajax通过post方法中的回调函数，处理服务器回传的数据，完成一次用户请求。
Asp.Net+JQuery.Ajax之$.post,布布扣,bubuko.com
时间： 2024-10-21 12:06:14