您现在的位置是:首页 > 其他

李清波 2020-05-21 其他 69958 复制当前网址

jQuery+ajax操作大全

参数

url 必需。规定把请求发送到哪个 URL。

data 可选。映射或字符串值。规定连同请求发送到服务器的数据。

success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。

dataType可选。规定预期的服务器响应的数据类型。


默认执行智能判断(xml、json、script 或 html)。

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType);

等价于:

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


大部分实现会规定一个 success 函数:

$.post("ajax/test.html", function(data) {
  $(".result").html(data);
});


jQuery 1.5 中的约定接口同样允许 jQuery 的 Ajax 方法,包括 $.post(),来链接同一请求的多个 .success()、.complete() 以及 .error() 回调函数,甚至会在请求也许已经完成后分配这些回调函数。

请求生成后立即分配处理程序,请记住该请求针对 jqxhr 对象

   

var jqxhr = $.post("example.php", function() {
      alert("success");
    })
    .success(function() { alert("second success"); })
    .error(function() { alert("error"); })
    .complete(function() { alert("complete"); });
    // 为上面的请求设置另一个完成函数
    jqxhr.complete(function(){ alert("second complete"); });


通过 AJAX POST 请求改变 div 元素的文本:

$("input").keyup(function(){
    txt=$("input").val();
    $.post("/jquery/gethint.asp",{suggest:txt},function(result){
      $("span").html(result);
    });
  });

例子 1

//请求 test.php 页面,并一起发送一些额外的数据(同时仍然忽略返回值):

$.post("test.php", { name: "John", time: "2pm" } );

例子 2

//向服务器传递数据数组(同时仍然忽略返回值):

$.post("test.php", { 'choices[]': ["Jon", "Susan"] });

例子 3

//使用 ajax 请求发送表单数据:

$.post("test.php", $("#testform").serialize());

例子 4

//输出来自请求页面 test.php 的结果(HTML 或 XML,取决于所返回的内容):

$.post("test.php", function(data){
   alert("Data Loaded: " + data);
 });

例子 5

//向页面 test.php 发送数据,并输出结果(HTML 或 XML,取决于所返回的内容):

$.post("test.php", { name: "John", time: "2pm" },
   function(data){
     alert("Data Loaded: " + data);
   });

例子 6

//获得 test.php 页面的内容,并存储为 XMLHttpResponse 对象,并通过 process() 这个 JavaScript 函数进行处理:

$.post("test.php", { name: "John", time: "2pm" },
   function(data){
     process(data);
   }, "xml");

例子 7

获得 test.php 页面返回的 json 格式的内容:

$.post("test.php", { "func": "getNameAndTime" },
   function(data){
     alert(data.name); // John
     console.log(data.time); //  2pm
   }, "json");
$("#province").change(function(){
    var pid = $("#province option:selected").val();
    var href='/common/ajax_scenic.php?action=city&pid='+pid+'&'+Math.random();
    var params = { 
        type:'GET', 
        url:href, 
        dataType:'text', 
        success:function(data){
            jQuery("#city").append(data);
        } 
    };
    jQuery.ajax( params );
});
$.ajax({
    url:'/member/ajax.php'+Math.random(),
    dataType:'text',
    data:encodeURI('action=edit_phone&uid='+uid+'&phone='+phone),
    success:function(data){
        var jsondata = eval('('+data+')');
        if(jsondata.result=='failure'){
            alert(jsondata.content);
        }
        if(jsondata.result=='success'){
            $('#comment_list').after(jsondata.html);
            alert('评论成功!');
        }
    }
});



var params = { 
    type:'GET', 
    url:href, 
    dataType:'text', 
    success:function(data){
        jQuery("#city").append(data);
        //$(".test").hide();
    } 
};
jQuery.ajax( params );


完整的AJAX代码

$.ajax({ 
    type:'GET', 
    url:href, 
    dataType:'text', 
    data:encodeURI('id=1&uid='+uid), //参数也可以这么写data: {id:1,uid:2}
    beforeSend:function(){
        $("#msg").html("logining");
    },
    success:function(data){
        jQuery("#city").append(data);
    },
    complete: function(XMLHttpRequest, textStatus){
        alert(XMLHttpRequest.responseText);alert(textStatus);
    },
    error: function(){} ,
});



文章来源:http://liqingbo.com/blog-92.html

评论