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 相关文章推荐
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
JS实现网页烟花动画效果
Mar 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
php5数字型字符串加解密代码
2008/04/24 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
php实现递归的三种基本方式
2020/07/04 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
js 学习笔记(三)
2009/12/29 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
python图像和办公文档处理总结
2019/05/28 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
主题教育活动总结
2014/05/05 职场文书
有关环保的标语
2014/06/13 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
python游戏开发之pygame实现接球小游戏
2022/04/22 Python