jQuery Ajax使用实例

 更新时间:2015年04月16日 08:49:38   投稿:junjie  
这篇文章主要介绍了jQuery Ajax使用实例,本文讲解了$.ajax的一般格式、$.ajax的参数描述、$.ajax需要注意的一些地方、$.ajax我的实际应用例子,需要的朋友可以参考下

Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的差异了。

$.post、$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()
一、$.ajax的一般格式

$.ajax({
   type: 'POST',
   url: url ,
  data: data ,
  success: success ,
  dataType: dataType
});

二、$.ajax的参数描述

参数 描述
url     必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType 可选。规定预期的服务器响应的数据类型。
默认执行智能判断(xml、json、script 或 html)。
三、$.ajax需要注意的一些地方:

1.data主要方式有三种,html拼接的,json数组,form表单经serialize()序列化的;通过dataType指定,不指定智能判断。

2.$.ajax只提交form以文本方式,如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit

四、$.ajax我的实际应用例子

//1.$.ajax带json数据的异步请求 
var aj = $.ajax( {  
  url:'productManager_reverseUpdate',// 跳转到 action  
  data:{  
       selRollBack : selRollBack,  
       selOperatorsCode : selOperatorsCode,  
       PROVINCECODE : PROVINCECODE,  
       pass2 : pass2  
  },  
  type:'post',  
  cache:false,  
  dataType:'json',  
  success:function(data) {  
    if(data.msg =="true" ){  
      // view("修改成功!");  
      alert("修改成功!");  
      window.location.reload();  
    }else{  
      view(data.msg);  
    }  
   },  
   error : function() {  
     // view("异常!");  
     alert("异常!");  
   }  
}); 
 
 
//2.$.ajax序列化表格内容为字符串的异步请求 
function noTips(){  
  var formParam = $("#form1").serialize();//序列化表格内容为字符串  
  $.ajax({  
    type:'post',    
    url:'Notice_noTipsNotice',  
    data:formParam,  
    cache:false,  
    dataType:'json',  
    success:function(data){  
    }  
  });  
}  
 
 
//3.$.ajax拼接url的异步请求 
var yz=$.ajax({  
   type:'post',  
   url:'validatePwd2_checkPwd2?password2='+password2,  
   data:{},  
   cache:false,  
   dataType:'json',  
   success:function(data){  
     if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间  
     {  
        textPassword2.html("<font color='red'>业务密码不正确!</font>");  
        $("#validatePassword2").val("pwd2Error");  
        checkPassword2 = false;  
        return;  
      }  
   },  
   error:function(){}  
});  
 
 
//4.$.ajax拼接data的异步请求 
$.ajax({   
  url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',   
  type:'post',   
  data:'merName='+values,   
  async : false, //默认为true 异步   
  error:function(){   
    alert('error');   
  },   
  success:function(data){   
    $("#"+divs).html(data);   
  } 
}); 

相关文章

  • Jquery操作radio的简单实例

    Jquery操作radio的简单实例

    本篇文章主要介绍了Jquery操作radio的简单实例。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 通过jsonp获取json数据实现AJAX跨域请求

    通过jsonp获取json数据实现AJAX跨域请求

    JSON 可通过 JavaScript 进行解析,JSON 数据可使用 AJAX 进行传输,这篇文章主要介绍了通过jsonp获取json数据(实现AJAX跨域请求),有兴趣的可以了解一下。
    2017-01-01
  • jQuery选择器之层次选择器用法实例分析

    jQuery选择器之层次选择器用法实例分析

    这篇文章主要介绍了jQuery选择器之层次选择器用法,结合实例形式分析了jQuery后代元素选择器、子元素选择器、相邻元素选择器、兄弟元素选择器等相关使用技巧,需要的朋友可以参考下
    2019-02-02
  • nicejforms——美化表单不用愁

    nicejforms——美化表单不用愁

    这篇文章主要介绍了nicejforms——美化表单不用愁
    2007-02-02
  • jQuery获取选中内容及设置元素属性的方法

    jQuery获取选中内容及设置元素属性的方法

    这篇文章主要介绍了jQuery获取选中内容及设置元素属性的方法,需要的朋友可以参考下
    2014-07-07
  • jQuery的.live()和.die() 使用介绍

    jQuery的.live()和.die() 使用介绍

    很多开发者都知道jQuery的.live()方法,他们大部分知道这个函数做什么,但是并不知道是怎么实现的,所以用的并不那么舒适。而且他们却从未听过还有解除绑定的.live()事件的.die()方法。即使你熟悉这些,但是你意识到.die()了吗?
    2011-09-09
  • jQuery+CSS3实现树叶飘落特效

    jQuery+CSS3实现树叶飘落特效

    本文给大家分享的是一段使用jQuery+CSS3实现树叶飘落特效的代码,效果非常不错,分享给大家,希望大家能够喜欢
    2015-02-02
  • jQuery代码性能优化的10种方法

    jQuery代码性能优化的10种方法

    之前,我们减少字节数和请求次数以及加载顺序以使页面加载的更快。如今,我们越来越多的注意到另一个影响网站性能的部分--CPU利用率。使用 jQuery和其他JavaScript框架,使节点选择和DOM操作变得越来越容易,如果使用不当,有可能影响整个网页的响应速度。
    2016-06-06
  • jQuery快速上手:写jQuery与直接写JS的区别详细解析

    jQuery快速上手:写jQuery与直接写JS的区别详细解析

    jQuery代码具体的写法和原生的Javascript写法在执行常见操作时的区别如下所示。需要的朋友可以过来参考下
    2013-08-08
  • 利用Jquery队列实现根据输入数量显示的动画

    利用Jquery队列实现根据输入数量显示的动画

    这篇文章给大家演示了如何利用Jquery队列实现输入不同的数量就显示不同的动画效果,文中给出了实例,让大家更容易理解,有需要的可以参考借鉴。
    2016-09-09

最新评论