`

jQuery Ajax 实例 ($.ajax、$.post、$.get)

 
阅读更多
 

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

推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html 和 http://www.w3school.com.cn/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我的实际应用例子

Js代码 复制代码 收藏代码
  1. //1.$.ajax带json数据的异步请求   
  2. var aj = $.ajax( {     
  3.     url:'productManager_reverseUpdate',// 跳转到 action     
  4.     data:{     
  5.              selRollBack : selRollBack,     
  6.              selOperatorsCode : selOperatorsCode,     
  7.              PROVINCECODE : PROVINCECODE,     
  8.              pass2 : pass2     
  9.     },     
  10.     type:'post',     
  11.     cache:false,     
  12.     dataType:'json',     
  13.     success:function(data) {     
  14.         if(data.msg =="true" ){     
  15.             // view("修改成功!");     
  16.             alert("修改成功!");     
  17.             window.location.reload();     
  18.         }else{     
  19.             view(data.msg);     
  20.         }     
  21.      },     
  22.      error : function() {     
  23.           // view("异常!");     
  24.           alert("异常!");     
  25.      }     
  26. });   
  27.   
  28.   
  29. //2.$.ajax序列化表格内容为字符串的异步请求   
  30. function noTips(){     
  31.     var formParam = $("#form1").serialize();//序列化表格内容为字符串     
  32.     $.ajax({     
  33.         type:'post',         
  34.         url:'Notice_noTipsNotice',     
  35.         data:formParam,     
  36.         cache:false,     
  37.         dataType:'json',     
  38.         success:function(data){     
  39.         }     
  40.     });     
  41. }     
  42.   
  43.   
  44. //3.$.ajax拼接url的异步请求   
  45. var yz=$.ajax({     
  46.      type:'post',     
  47.      url:'validatePwd2_checkPwd2?password2='+password2,     
  48.      data:{},     
  49.      cache:false,     
  50.      dataType:'json',     
  51.      success:function(data){     
  52.           if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间     
  53.           {     
  54.                textPassword2.html("<font color='red'>业务密码不正确!</font>");     
  55.                $("#validatePassword2").val("pwd2Error");     
  56.                checkPassword2 = false;     
  57.                return;     
  58.            }     
  59.       },     
  60.       error:function(){}     
  61. });    
  62.   
  63.   
  64. //4.$.ajax拼接data的异步请求   
  65. $.ajax({      
  66.     url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',      
  67.     type:'post',      
  68.     data:'merName='+values,      
  69.     async : false//默认为true 异步      
  70.     error:function(){      
  71.        alert('error');      
  72.     },      
  73.     success:function(data){      
  74.        $("#"+divs).html(data);      
  75.     }   
  76. });  
分享到:
评论

相关推荐

    asp+ajax(jQuery)实例($.ajax()、$.post()、$.get()、$.getJSON()四种模式可选)

    asp+ajax(jQuery)实例($.ajax()、$.post()、$.get()、$.getJSON()四种模式可选 Ajax是目前比较流行的网站建设技术,尤其作为网站建设者来说,掌握它十分有必要,如果用原生Javascript开发则比较困难,还好有强大的...

    jQuery Ajax 实例代码 ($.ajax、$.post、$.get)

    $.post、$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一、$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType }); 二、...

    jQuery Ajax 实例详解 ($.ajax、$.post、$.get)

    以上就是关于 jQuery AJAX 的实例详解,包括 $.ajax, $.post 和 $.get 的使用方法以及一些实际应用场景。通过这些方法,我们可以轻松地在客户端与服务器之间进行数据交互,实现页面的无刷新更新。

    asp+jquery ajax实例源码,添加,删除,修改,分页

    - jQuery的$.getJSON()和$.get()、$.post()方法使AJAX请求更易编写,同时提供了一系列便利的事件处理函数,简化了页面元素的操作。 - 结合使用,可以轻松实现如分页链接的点击事件监听,触发AJAX请求,更新页面...

    $.ajax()方法详解

    此外,还有一些其他的选项,如`contentType`(请求的Content-Type头)、`crossDomain`(是否跨域请求)、`xhrFields`(自定义XMLHttpRequest实例字段)等,它们进一步增强了$.ajax()方法的灵活性。 使用$.ajax()...

    jQuery Ajax 全解析.

    它包括一系列易于使用的函数,如 `$.ajax()`、`$.get()` 和 `$.post()` 等,这些函数可以帮助开发者快速实现 Ajax 请求。 #### 三、核心方法详解 ##### 1. load() - **函数签名**:`load(url[, data][, callback]...

    基于JQuery框架的AJAX实例代码

    在这个"基于JQuery框架的AJAX实例代码"中,我们将探讨如何使用jQuery提供的API,包括`$.ajax`,`$.post`和`$.get`,来实现异步数据传输。 1. **$.ajax()** `$.ajax()`是jQuery中最全面的AJAX方法,它可以处理GET和...

    简单的jquery ajax实例,简单明了特别实用

    jQuery的核心AJAX方法是`$.ajax()`,它支持所有AJAX选项。例如,创建一个基本的GET请求: ```javascript $.ajax({ url: "myScript.php", type: "GET", success: function(response) { console.log(response);...

    jQueryAPI_CHM.rar

    jQuery的$.ajax()函数是进行异步数据请求的核心,它支持GET和POST等多种HTTP方法,同时提供dataType选项来指定返回的数据类型,如json、xml、html等。$.getJSON()和$.getScript()分别用于获取JSON数据和加载...

    spring框架项目+jQueryAjax提交实例。jquery-3.3.1.min.js

    标题中的"spring框架项目+jQueryAjax提交实例"指的是一个整合了Spring框架和jQuery AJAX技术的Web应用程序项目。这个项目提供了一个完整的流程,演示了如何在前端使用jQuery的AJAX功能向后端Spring MVC控制器发送...

    C#.net下jquery ajax实例及教程

    除了`$.ajax()`,jQuery还提供了一些简化的版本,如`$.get()`和`$.post()`,用于快速实现GET和POST请求。例如,要使用GET请求获取数据: ```javascript $.get('api/data', function(responseData) { // 处理返回的...

    Jquery Ajax分页(有实例)

    jQuery封装了AJAX操作,提供了一套简洁的API,如`$.ajax()`, `$.get()`, `$.post()`等,使开发者能够轻松地实现AJAX请求。 分页通常分为两种类型:服务器端分页和客户端分页。服务器端分页意味着每次用户翻页时,...

    jquery中的ajax实例

    除了`$.ajax`方法,jQuery还提供了简化版本的`$.post`和`$.get`方法。例如: ```javascript // $.post 方法 $('#test_post').click(function () { $.post( 'ajax_json.php', // 后台处理程序 { username: $('#...

    jQuery-AJAX.zip_jquery ajax

    1. `$.ajax()`: 这是最常用的AJAX函数,它可以接受一系列参数,包括URL、请求类型(GET或POST)、数据、回调函数等,可以进行复杂的AJAX请求。 2. `$.get()`: 用于发起GET请求,它接受URL和回调函数作为参数,返回...

    Asp.Net MVC之jQuery与AJAX操作实例

    2. 使用`$.get()`和`$.post()`简写方法:对于简单的GET和POST请求,可以使用这两个方法,如: ```javascript $.get('/Home/GetData', function(data) { // 处理返回的数据 }); $.post('/Home/AddData', { name: '...

    Jquery-Ajax.rar_ajax_jq-ajax_neededhu5_travelgeq

    jQuery提供`$.getJSONP()`或在`$.ajax()`中设置`dataType: 'jsonp'`来实现。 ### 8. 路径和数据缓存 默认情况下,Ajax请求不会缓存数据。如果需要开启缓存,可以在Ajax设置中添加`cache: true`。 ### 9. 阻止页面...

    jQueryAjax.rar_jquery 例子

    为了方便开发者,jQuery还提供了一些简化的Ajax方法,如`$.get()`, `$.post()`, `$.getJSON()`, 和 `$.load()`。比如使用`$.post()`进行POST请求: ```javascript $.post('example.php', { key: 'value' }, ...

Global site tag (gtag.js) - Google Analytics