zoukankan      html  css  js  c++  java
  • jQuery AJAX

    AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)

    jQuery 参考手册 - Ajax

    jQuery load() 方法

    1. load()方法通常用来从Web服务器上获取静态的数据文件
    2. load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中。
    load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
    
        $(selector).load(URL,data,callback);
    
    必需的 URL 参数规定您希望加载的 URL。
    可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
    可选的 callback 参数是 load() 方法完成后所执行的函数名称。
    
    $(function(){
          $("#send").click(function(){
                  $("#resText").load("test.html");
          })
    })
    
    如果只需要加载test.html页面内的某些元素:
        $("#resText").load("test.html  .para");
        注意,URL和选择器之间有一个空格
    

    jQuery get() 和 post() 方法

    1. $.get() 方法通过 HTTP GET 请求从服务器上请求数据。
    
        $.get(url,[data],[callback],[type])
    
    url        String        请求的HTML页的URL地址
    data(可选)        Object        发送至服务器的key/value数据会作为QueryString附加到请求URL中
    callback(可选)        Function        载入成功时回调函数(只有当Response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法
    type(可选)        String        服务器端返回内容的样式,包括xml、html、script、json、text和_default
    
    $(function(){
           $("#send").click(function(){
                $.get("url", 
                        { 
                          username :  $("#username").val() , 
                          content :  $("#content").val()  
                        },
                        function (data, textStatus){
                            $("#resText").html(data); // 把返回的数据添加到页面上
                        }
                );
           });
    });
    
    
    2. $.post() 方法通过 HTTP POST 请求从服务器上请求数据。
    
        $.post(url,[data],[callback],[type]);
    
    必需的 URL 参数规定您希望请求的 URL。
    可选的 data 参数规定连同请求发送的数据。
    可选的 callback 参数是请求成功后所执行的函数名。
    
    <script>
    $(document).ready(function(){
    	$("button").click(function(){
    		$.post("/try/ajax/demo_test_post.php",{
    			name:"菜鸟教程",
    			url:"http://www.runoob.com"
    		},
    		function(data,status){
    			alert("数据: 
    " + data + "
    状态: " + status);
    		});
    	});
    });
    </script>
    

    $.get()和$.post()方法是jQuery中的全局函数,而在此之前讲的load()是对jQuery对象进行操作的。

    ajax() 方法

    该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post

    $.ajax() 返回其创建的 XMLHttpRequest 对象
    
    1.数据参数:
    
    url:    请求的页面地址,默认值为当前页面地址
    
    type:    http请求类型 GET/POST
    
    data:    键值对,来传递请求参数
    
    async:    默认为true,异步请求,false为同步请求
    
    timeout:     要求为Number类型的参数,设置请求超时时间(毫秒)。
    
    contentType:要求为String类型的参数,当发送信息至服务器时,内容编码类型默认为”application/x-www-form-urlencoded”。
    该默认值适合大多数应用场合。
    
    processData:要求为Boolean类型的参数,默认为true。
    默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型”application/x-www-form-urlencoded”。
    如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。
    
    注:上面两个用在上传文件时,需要设置成false,并用(var formData = new FormData();)封装文件与内容。
    
    cache:     要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息。
    
    dataType:    服务器返回数据的数据类型。如果不指定,jQuery 自动根据HTTP 包MIME信息来智能判断
    
        "xml":     返回 XML 文档,可用 jQuery 处理。
    
        "html":     返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
    
        "script":     返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。
                         注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
    
        "json":     返回 JSON 数据 。
    
        "jsonp":     JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
    
        "text":     返回纯文本字符串
    
    2.回调函数:
    
    beforeSend:    发送请求之前调用,XMLHttpRequest对象为唯一参数,一般可在发送请求之前修改XMLHttpRequest对象,如添加自定义HTTP头。
        function(XMLHttpRequest)
    
    error:    请求失败时调用 参数有三个:XMLHttpRequset对象,错误信息,(可选)捕获的异常对象。
        function(XMLHttpRequest, textStatus, errorThrown)
    
    dataFilter:    在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。传递给 success 回调函数。
        function(data, type){
             //返回处理后的数据
             return data;
         }
    
    success:    请求成功后的回调函数,参数有3个:根据 dataType 参数进行处理后的数据,描述状态的字符串,XMLHttpRequest对象。
        function(data, textStatus)
             (1)由服务器返回,并根据dataType参数进行处理后的数据。
             (2)描述状态的字符串。
    
    complete:    请求完成后回调函数 (请求成功或失败之后均调用)。参数为XMLHttpRequest 对象和一个描述请求类型的字符串。
        function(XMLHttpRequest, textStatus)
    
    
    $(function(){
        $('#send').click(function(){
             $.ajax({
                 type: "GET",
                 url: "test.json",
                 data: {username:$("#username").val(), content:$("#content").val()},
                 dataType: "json",
                 beforeSend:function(){
                             //请求前的处理
                 },
                 success: function(data){
                             $('#resText').empty();   //清空resText里面的所有内容
                             var html = ''; 
                             $.each(data, function(commentIndex, comment){
                                   html += '<div class="comment"><h6>' + comment['username']
                                             + ':</h6><p class="para"' + comment['content']
                                             + '</p></div>';
                             });
                             $('#resText').html(html);
                 },
                 complete:function(){
                             //请求完成的处理
                 },
                 error:function(){
                             //请求出错处理
                 }
             });
        });
    });
    
  • 相关阅读:
    文件语音识别Google语音识别学习札记 Windows PC机上测试语音识别Strut2教程java教程
    进程方法Android面试题(二)Strut2教程java教程
    工程选择LibGdx开发环境搭建Strut2教程java教程
    检查点重做检查点队列简单总结Strut2教程java教程
    ORACLE连接数据库(备忘)
    字符扫描剑指Offer读书笔记之第二章2字符替换Strut2教程java教程
    文件函数Django1.5实战第一步之搭建环境,创建工程,运行开发服务器Strut2教程java教程
    算法长度K最短路问题(单源点最短路径+A*算法)Strut2教程java教程
    单位真实世界LibGdxBox2d单位换算Strut2教程java教程
    配置执行【Oracle】无法对所有 EM 相关帐户解锁Strut2教程java教程
  • 原文地址:https://www.cnblogs.com/loveer/p/11342242.html
Copyright © 2011-2022 走看看