`

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

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

推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:
http://www.w3school.com.cn/jquery/

http://www.w3school.com.cn/jquery/ajax_ajax.asp

http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html

http://www.php100.com/html/program/jquery/2013/0905/5973.html
$.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){  
        }  
    });  
} 

// $.ajax提交(附件+表单)
<form id= "uploadForm">  
      <p >指定文件名: <input type="text" name="filename" value= ""/></p >  
      <p >上传文件: <input type="file" name="file"/></ p>  
      <input type="button" value="上传" onclick="doUpload()" />  
</form>  
function doUpload() {  
     var formData = new FormData($( "#uploadForm" )[0]);  // 要求使用的html对象
     $.ajax({  
          url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,  
          type: 'POST',  
          data: formData,  
          async: true,  
          // 下面三个参数要指定,如果不指定,会报一个JQuery的错误 
      cache: false,  
          contentType: false,  
          processData: false,  
          success: function (returndata) {  
              alert(returndata);  
          },  
          error: function (returndata) {  
              alert(returndata);  
          }  
     });  
}
//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);   
    }
});
分享到:
评论

相关推荐

    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);...

    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) { // 处理返回的...

    jQueryAPI_CHM.rar

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

    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: $('#...

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

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

    jQuery-AJAX.zip_jquery ajax

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

    jQueryAjax.rar_jquery 例子

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

    Jquery-Ajax.rar_ajax_jq-ajax_neededhu5_travelgeq

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

Global site tag (gtag.js) - Google Analytics