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 相关文章推荐
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
js的三种继承方式详解
Jan 21 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 Javascript
vue 获取url里参数的两种方法小结
Nov 12 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
一个简单的域名注册情况查询程序
2006/10/09 PHP
PHP 代码规范小结
2012/03/08 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
python3.3实现乘法表示例
2014/02/07 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python中的句柄操作的方法示例
2019/06/20 Python
Python实现代码统计工具
2019/09/19 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
为什么称python为胶水语言
2020/06/16 Python
快速创建python 虚拟环境
2020/11/28 Python
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
英语教学随笔感言
2014/02/20 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
2015年科协工作总结
2015/05/19 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫