Ajax在Web应用中的作用越来越大,许多工具都包含了对这一功能的使用,以下是对这些常用工具中Ajax的典型实例.
一、jQuery中Ajax的调用(需要引用jQuery代码库)。
1.$.get(url, function(data) {
//deal with the data
});
2.jQuery.post( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] )
$.post(url,postdata, function(data) {
//deal with the data
});
3.$.ajax({
type: "POST",// or get
contentType: "application/json; charset=utf-8",
url: url,
data: "{'countryModel':" + JSON.stringify(countryModel) + "}",
dataType: "json",//html,xml,script
async: true, //true 表示异步,默认就是true
success: function(data) {
//deal with the data
},
error: function() {
// deal with error
}
});
二、jQuery.Form plugin Ajax(需要引用jQuery代码库和jQuery.Form插件)
中文API地址:http://www.aqee.net/docs/jquery.form.plugin/jquery.form.plugin.html#getting-started
基于Form表单的Ajax调用
1.ajaxForm, 这个方法在调用时不是马上提交,只是说明调用的Form要以ajax方式提交,该方法一般在$(document).ready方法里设置。
2.
ajaxSubmit,这个方法在调用时就会马上提交。
var options = {
target: '#divToUpdate',
url: 'comment.php',
success: function() {
alert('Thanks for your comment!');
}
};
$('#myForm').ajaxForm(options);
或$('#myForm').
ajaxSubmit
(options);
三、Ajax在MVC中的使用
以上两种方法都可以用,
另外我们可以MicrosoftAjax,这就必须引用MicrosoftAjax.js, MicorsoftMvcAjax.js这两个文件
1.Ajax.BeginForm
<%
using
(Ajax.BeginForm(
"
action
"
,
"
controll
"
,
new
AjaxOptions
{
UpdateTargetId = " ajaxdiv " ,
HttpMethod = " POST "
}, new { id = " AjaxForm " }))
{ %>
< input type = " text " id = " EmployeeId2 " />
< input type = " submit " value = " Submit " />
<% } %>
< div id = " ajaxdiv " >
</ div >
{
UpdateTargetId = " ajaxdiv " ,
HttpMethod = " POST "
}, new { id = " AjaxForm " }))
{ %>
< input type = " text " id = " EmployeeId2 " />
< input type = " submit " value = " Submit " />
<% } %>
< div id = " ajaxdiv " >
</ div >
2.Ajax.ActionLink
<%=
Ajax.ActionLink(
"
LinkName
"
,
"
action
"
,
"
controll
"
,
new
AjaxOptions
{
LoadingElementId = " loadingdiv " ,
UpdateTargetId = " ajaxdiv " ,
HttpMethod = " POST "
}); %>
<div id="ajaxdiv">
</div>
<div id="loadingdiv">
</div>
{
LoadingElementId = " loadingdiv " ,
UpdateTargetId = " ajaxdiv " ,
HttpMethod = " POST "
}); %>
<div id="ajaxdiv">
</div>
<div id="loadingdiv">
</div>
四、jquery.form与jquery.validate结合使用
前端代码
<
script
type
="text/javascript"
language
="javascript"
src
="http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js"
></
script
>
< script type ="text/javascript" language ="javascript" src ="http://www.cnblogs.com/Scripts/jquery.validate.min.js" ></ script >
< script type ="text/javascript" language ="javascript" src ="http://www.cnblogs.com/Scripts/jquery.form.js" ></ script >
< h2 >
AjaxFrom </ h2 >
< div id ="output1" style ="color: Red;" >
</ div >
<% using (Html.BeginForm( " Login " , " Home " , FormMethod.Post, new { id = " loginForm " }))
{ %>
< table border ="0" cellpadding ="0" cellspacing ="0" >
< tr >
< td >
<% = Html.TextBox( " UserEmail " , "" , new { @class = " name required " }) %>
</ td >
</ tr >
< tr >
< td >
<% = Html.Password( " Password " , "" , new { @class = " required " }) %>
</ td >
</ tr >
< tr >
< td >
< input type ="submit" value ="submit" />
</ td >
</ tr >
</ table >
<% } %>
< script language ="javascript" type ="text/javascript" >
$(document).ready( function () {
var opts = {
submitHandler: function (form) {
var submitOpts = {
target: ' #output1 ' ,
success: function () {
alert( ' Thanks for your comment! ' );
}
};
$(form).ajaxSubmit(submitOpts);
}
};
jQuery( " #loginForm " ).validate(opts);
});
</ script >
< script type ="text/javascript" language ="javascript" src ="http://www.cnblogs.com/Scripts/jquery.validate.min.js" ></ script >
< script type ="text/javascript" language ="javascript" src ="http://www.cnblogs.com/Scripts/jquery.form.js" ></ script >
< h2 >
AjaxFrom </ h2 >
< div id ="output1" style ="color: Red;" >
</ div >
<% using (Html.BeginForm( " Login " , " Home " , FormMethod.Post, new { id = " loginForm " }))
{ %>
< table border ="0" cellpadding ="0" cellspacing ="0" >
< tr >
< td >
<% = Html.TextBox( " UserEmail " , "" , new { @class = " name required " }) %>
</ td >
</ tr >
< tr >
< td >
<% = Html.Password( " Password " , "" , new { @class = " required " }) %>
</ td >
</ tr >
< tr >
< td >
< input type ="submit" value ="submit" />
</ td >
</ tr >
</ table >
<% } %>
< script language ="javascript" type ="text/javascript" >
$(document).ready( function () {
var opts = {
submitHandler: function (form) {
var submitOpts = {
target: ' #output1 ' ,
success: function () {
alert( ' Thanks for your comment! ' );
}
};
$(form).ajaxSubmit(submitOpts);
}
};
jQuery( " #loginForm " ).validate(opts);
});
</ script >
后端Action
public
PartialViewResult Login(
string
UserEmail,
string
Password)
{
// you code
return PartialView( " Success " );
}
{
// you code
return PartialView( " Success " );
}