- ASP.NET框架应用程序实战：软件开发工程师岗前必备
- 李发陵
- 2825字
- 2021-01-07 18:47:07
3.5 JQueryAJAX
AJAX是AsynchronousJavaScriptandXML的缩写，其核心是通过XMLHttpRequest对象，以一种异步的方式向服务器发送数据请求，并通过该对象接收请求返回的数据，从而完成人机交互的数据操作。这种利用AJAX技术进行的数据交互并不局限于Web动态页面，在普通的静态HTML页面中同样可以实现，因此，在这样的背景下，AJAX技术在页面开发中得以广泛使用。在jQuery中，同样有大量的函数与方法为AJAX技术提供支持。
AJAX技术通常用于客户端与服务器端异步交换数据，在交换数据时最常被用到的方法是get和post。
1.get
get方法从指定的资源请求数据，$.get方法即采用此种方法实现。采用get方法传递数据时采用“名称/值对”的方法，举例如下：
/test/demo_form.asp? name1=value1&name2=value2
get方法的其他特性如下：
（1）get请求可被缓存。
（2）get请求保留在浏览器历史记录中。
（3）get请求可被收藏为书签。
（4）get请求不应在处理敏感数据时使用。
（5）get请求有长度限制。
（6）get请求只应用于取回数据。
2.post
post向指定的资源提交要被处理的数据，$.post方法即采用此种方法实现。采用get方法传递数据时采用“名称/值对”的方法进行传递。举例如下：
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
post方法的其他特性如下：
（1）post请求不会被缓存。
（2）post请求不会保留在浏览器历史记录中。
（3）post不能被收藏为书签。
（4）post请求对数据长度没有要求。
3.5.1 $.get方法
作用：使用get方法异步获取服务器端的数据。
语法：jQuery.get（url, [data], [callback]）
其中，参数url（String）：发送请求的URL地址；data（Map）:（可选）要发送给服务器的数据，以Key/value的键值对形式表示，会作为QueryString附加到请求URL中。callback（Function）:（可选）载入成功时回调函数（只有当Response的返回状态是success才会调用该方法）。
【实例】 使用get方法异步获取学生班级的人数。
实现步骤如下：
（1）新建一个名为StudentController的MVC5控制器。
（2）在StudentController控制器中添加一个名为GetStudentCount的动作，代码如下：
[HttpGet]
///＜summary＞
///根据班级ID获取该班学生的总数
///＜/summary＞
///＜param name=＂classId＂＞班级ID＜/param＞
///＜returns＞学生总数＜/returns＞
public string GetStudentCount(string classId)
{
if(classId ==＂32＂)
{
return ＂45＂;
}
return ＂0＂;
}
小贴士
代码中的[HttpGet]标签是一个属性（可以用其规范类或方法的行为），上例中的[HttpGet]表示该方法只接受客户端使用get方法与Controller进行异步数据交换。
（3）展开Student文件夹，右击并选择“添加（D）”→“MVC视图页（Razor）”，创建一个名为Index的视图，并添加程序代码如下：
＜html＞
＜head＞
＜meta name=＂viewport＂ content=＂width=device-width＂ /＞
＜title＞＜/title＞
＜script src=＂～/Scripts/jquery-1.10.2.min.js＂ type=＂text/javascript＂＞
＜/script＞
＜script type=＂text/javascript＂＞
function getStudentCount()
{
$.get(＂GetStudentCount＂, {classId:＂32＂}, function (data,
textStatus) {
//textStatus有多种状态，仅值为success时才会调用成功
if (textStatus ==＂success＂)
{
//将返回结果显示在视图的divContent控件中
$(＂#divContent＂).html(＂＜span＞＂ +data +＂＜/span＞＂);
}
else {
//给用户提示异常消息
alert(＂异常获取数据失败。消息为：＂ +textStatus);
}
})
}
＜/script＞
＜/head＞
＜body＞
＜div＞
＜input id=＂btnGetStudentCount＂ type=＂button＂ value=＂获取学生总数＂
onclick=＂getStudentCount()＂ /＞
＜div id=＂divContent＂＞＜/div＞
＜/div＞
＜/body＞
＜/html＞
（4）单击“获取学生总数”按钮后，界面如图3-10所示。
图3-10 获取学生的总数
3.5.2 $.post方法
作用：使用post方式来进行异步提交数据的操作。
语法：JQuery.post（url, [data], [callback], [type]）
其中，url（String）发送请求的URL地址；data（Map）（可选）为发送给服务器的数据，以Key/value的键值对形式表示；callback（Function）（可选）为载入成功时的回调函数（只有当Response的返回状态是success才会调用该方法）; type（String）（可选）用于确定提交的数据格式，如xml、html、script、json、text等。
【例3-6】 使用post方法异步提交学生的信息。
（1）新建一个名为StudentController的MVC5控制器。
（2）在StudentController控制器中添加两个名为Create的动作，第一个Create方法用于显示Create视图，第二个Create方法用于异步创建学生的信息。代码如下：
//用于显示Create视图
public ActionResult Create()
{
return View();
}
[HttpPost]
///＜summary＞
///持久化显示页面传递过来的学生信息
///＜/summary＞
///＜param name=＂name＂＞学生姓名＜/param＞
///＜param name=＂gender＂＞学生性别＜/param＞
///＜param name=＂birthPlace＂＞出生地＜/param＞
///＜returns＞返回值，true：成功；false：失败＜/returns＞
public string Create(string name, string gender, string birthPlace)
{
if (name ==＂michael＂ && gender ==＂男＂ && birthPlace ==＂重庆＂)
{
return ＂true＂;
}
return ＂false＂;
}
小贴士
代码中的[HttpGet]表示该方法只接受客户端使用post方法与Controller进行异步数据交换。
（3）在Views→Student文件夹下创建一个名为Create的视图，并添加客户端代码如下。
＜html＞
＜head＞
＜meta name=＂viewport＂ content=＂width=device-width＂ /＞
＜title＞＜/title＞
＜script src=＂～/Scripts/jquery-1.10.2.min.js＂＞＜/script＞
＜script type=＂text/javascript＂＞
//在视图中注册事件，客户端完成加载后触发
$().ready(function () {
//为保存按键注册一个单击事件，用于异步提交数据
$(＂#btnSave＂).click(function () {
var name =$(＂#name＂).val(); //从视图中获取用户输入的姓名
var gender =$(＂#gender＂).val(); //从视图中获取用户输入的性别
var birthPlace=$(＂#birthPlace＂).val(); //从视图中获取用户输入的出生地
$.post(＂Create＂, { name: name, gender: gender, birthPlace:
birthPlace }, function (data, textStatus) {
if(textStatus ==＂success＂)
{
if (data ==＂true＂) {
$(＂#divResult＂).html(＂＜span＞保存成功。＜/span＞＂);
}
else {
$(＂#divResult＂).html(＂＜span＞保存失败。＜/span＞＂);
}
}
else {
$(＂#divResult＂).html(＂＜span＞＂+textStatus+＂＜/span＞＂)
}
}, ＂text＂);
})
});
＜/script＞
＜/head＞
＜body＞
＜div＞
＜span＞姓名：＜/span＞＜input id=＂name＂ name=＂name＂ /＞
＜span＞性别：＜/span＞＜input id=＂gender＂ name=＂gender＂ /＞
＜span＞出生地：＜/span＞＜input id=＂birthPlace＂ name=＂birthPlace＂ /＞
＜input id=＂btnSave＂ type=＂button＂ value=＂保存＂ /＞
＜div id=＂divResult＂＞＜/div＞
＜/div＞
＜/body＞
＜/html＞
（4）程序的运行结果如图3-11所示。
图3-11 异步提交学生信息的界面
3.5.3 $.AJAX方法
作用：通过HTTP请求加载远程数据。
语法：jQuery.ajax（options）
options参数列表如表3-8所示。
表3-8 options参数列表
续表
【例】 使用$.ajax实现异步登录。
（1）新建一个名为UserController的MVC4控制器。
（2）在UserController控制器中添加二个名为Login的动作，第一个Login方法用于显示Login视图，第二个Login方法用于异步验证登录信息，代码如下：
public ActionResult Login()
{
return View();
}
[HttpPost]
///＜summary＞
///根据用户账号和密码验证登录信息
///＜/summary＞
///＜param name=＂account＂＞用户账号＜/param＞
///＜param name=＂pwd＂＞密码＜/param＞
///＜returns＞返回值，＂true＂：登录成功；＂false＂；用户名或密码错误＜/returns＞
public string Login(string account, string pwd)
{
Thread.Sleep(1000); //休眠一秒钟，模拟读取数据库的过程
if (account ==＂michael＂ && pwd ==＂123＂)
{
return ＂true＂;
}
return ＂false＂;
}
（3）创建一个名为Login的视图，在视图中添加HTML标签并实现与后端代码进行异步交互的JQuery代码，代码如下所示。
＜html＞
＜head＞
＜meta name=＂viewport＂ content=＂width=device-width＂ /＞
＜title＞Login＜/title＞
＜script src=＂～/Scripts/jquery-1.10.2.min.js＂＞＜/script＞
＜script type=＂text/javascript＂＞
$().ready(function () {
$(＂#btnLogin＂).click(function () {
var account =$(＂#account＂).val();
var pwd =$(＂#pwd＂).val();
$.ajax({
type: ＂post＂,
url: ＂Login＂,
data:{ account:account, pwd: pwd },
//向Controller的Login方法传递参数
beforeSend: function (XMLHttpRequest) {
$(＂#btnLogin＂).attr(＂disabled＂, ＂disabled＂);
//将“登录”按钮设置为“不可用”
$(＂#btnLogin＂).val(＂验证中．..＂);
//将“登录”按钮的文本设置为“验证中．..”
},
success: function (data, textStatus) {
RollBackSaveButton(); //将“登录”按钮的文本回滚到登录前的内容
if (data ==＂true＂) {
alert(＂登录成功。＂);
}
else {
alert(＂用户名或密码错误。＂);
}
},
complete: function (XMLHttpRequest, textStatus) {
RollBackSaveButton(); //将“登录”按钮的文本回滚到登录前的内容
},
error: function () {
//请求出错处理
}
});
});
});
//将“登录”按钮的文本回滚到登录前的内容
function RollBackSaveButton()
{
$(＂#btnLogin＂).removeAttr(＂disabled＂); //移除“登录”按钮的disabled属性，使其可用
$(＂#btnLogin＂).val(＂登录＂);
}
＜/script＞
＜/head＞
＜body＞
＜div＞
＜span＞用户名：＜/span＞＜input name=＂account＂ id=＂account＂ /＞
＜span＞密码：＜/span＞＜input name=＂pwd＂ type=＂password＂ id=＂pwd＂ /＞
＜input type=＂button＂ id=＂btnLogin＂ value=＂登录＂ /＞
＜/div＞
＜/body＞
＜/html＞
（4）输入用户名和密码后，数据异步验证过程的运行界面如图3-12所示。
图3-12 数据异步验证过程的运行界面
（5）后台验证用户名和密码成功后的界面如图3-13所示。
图3-13 后台验证用户名和密码成功后的界面