手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery ajax应用总结
jQuery ajax应用总结
摘要:一、jQuery中Ajax的调用(需要引用jQuery代码库)。方法1:复制代码代码如下:$.get(url,function(data){...

一、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插件)

基于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>

2.Ajax.ActionLink

<%=Ajax.ActionLink("LinkName","action", "controll", new AjaxOptions

{

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.jb51.net/Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript" language="javascript" src="http://www.jb51.net/Scripts/jquery.validate.min.js"></script> <script type="text/javascript" language="javascript" src="http://www.jb51.net/Scripts/jquery.form.js"></script> <h2> AjaxFrom</h2> <div id="output1"> </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"); }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持查字典教程网。

【jQuery ajax应用总结】相关文章:

jQuery结合ajax实现动态加载文本内容

jQuery实现表格行上下移动和置顶效果

jQuery常用知识点总结以及平时封装常用函数

jQuery中 prop() attr()使用详解

javascript正则表达式总结

常用DOM整理

jquery预加载图片的方法

jQuery+ajax实现无刷新级联菜单示例

jquery实现的判断倒计时是否结束代码

jQuery取消ajax请求的方法

精品推荐
分类导航