jQuery ajax应用总结


Posted in Javascript onJune 02, 2016

一、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="https://3water.com/Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" language="javascript" src="https://3water.com/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" language="javascript" src="https://3water.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");
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
理解 JavaScript 预解析
Oct 25 Javascript
JSQL 批量图片切换的实现代码
May 05 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 #Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 #Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 #Javascript
Javascript小技能总结(推荐)
Jun 02 #Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 #Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 #Javascript
深入理解jQuery之事件移除
Jun 02 #Javascript
You might like
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
jquery和ajax的关系详细介绍
2013/11/29 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
js中开关变量使用实例
2017/02/24 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
Python从函数参数类型引出元组实例分析
2019/05/28 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
世界上最好的帽子:Tilley
2016/11/27 全球购物
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
Java的类与C++的类有什么不同
2014/01/18 面试题
物业管理应届生求职信
2013/10/28 职场文书
财务部出纳岗位职责
2013/12/22 职场文书
新春联欢会主持词
2014/03/24 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
公司2014年度工作总结
2014/12/10 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
无线电知识基础入门篇
2022/02/18 无线电