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 相关文章推荐
使用firebug进行调试javascript的示例
Dec 16 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 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设计模式 Factory(工厂模式)
2011/06/26 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
php实现文件编码批量转换
2014/03/10 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
详解python的几种标准输出重定向方式
2016/08/15 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
python中rc1什么意思
2020/06/19 Python
python 星号(*)的多种用途
2020/09/21 Python
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
行政部主管岗位职责
2013/12/28 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
安全生产承诺书
2014/03/26 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
优秀教师个人材料
2014/12/15 职场文书
长城导游词400字
2015/01/30 职场文书
国博复兴之路观后感
2015/06/02 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
goland 恢复已更改文件的操作
2021/04/28 Golang