zoukankan      html  css  js  c++  java
  • Ajax-04 jQuery Ajax 常用操作

    jQuery

    jQuery 其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能。

    jQuery Ajax

    a.概述

      jQuery 不是生产者,而是大自然的搬运工

      jQuery Ajax 本质是 XMLHttpRequest 或 ActiveXObject

    b.使用

      --- 下载导入jQuery(2.+ 版本不再支持IE9以下的浏览器)

    jQuery Ajax常用操作

    jQuery.ajax( url [, settings ] )

    执行一个异步的HTTP(Ajax)的请求。

    所有参数:

        url: 待载入页面的URL地址

      settings: 一个以"{键:值}"组成的AJAX 请求设置。所有选项都是可选的。如下:

         type:       请求方式,GET、POST

        headers:   请求头

        data:     要发送的数据

        contentType:  即将发送信息到服务器的内容编码类型(默认:"application/x-www-form-urlencoded;charset=UTF-8")

        async:    是否异步

        timeout: 设置请求超时时间(毫秒)

        

        beforeSend:发送请求前执行的函数

        complete:完成之后执行的回调函数

        success:成功之后执行的回调函数

        error: 失败之后执行的回调函数

        accepts:通过请求头发送给服务器,告诉服务器当前客户端可接受的数据类型

        dataType:将服务器端返回的数据转换成指定类型

            "xml":将服务器端返回的内容转换成xml格式

            "text":将服务器端返回的内容转换成普通文本格式

            "html":将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含javaScript 标签,则会尝试去执行。

            "script":将服务器端返回的内容转换成相应的JavaScript对象。

            "json":将服务器端返回的内容转换成json对象

            "jsonp":使用JSONP形式调用函数时,如"myurl?callback=?" jQuery将自动替换?为正确的函数名,以执行回调函数

    jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

    描述: 使用一个HTTP GET请求从服务器加载数据。

    所有参数:

        url: 待载入页面的URL地址

       data: 待发送 key/value 参数

     success: 载入成功时回调函数

    dataType: 从服务器返回的预期的数据类型,xml,json,script,text,html

     这是一个Ajax功能的缩写,这相当于:

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

    实例1:返回内容为text时,dataType使用'text'

    data.txt 文件:

    name:"Milton",age:18

    jq_get.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery get</title>
    </head>
    <body>
    <input type="submit" onclick="SendRequest();"/>
    
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        function SendRequest() {
            jQuery.get({
                url: 'data.txt',
                dataType: 'text',
                success: function (data, textStatus, xmlhttpRequest) {
                    console.log(data, typeof  data);
                    console.log(textStatus);
                    console.log(xmlhttpRequest);
                }
            });
        }
    </script>
    </body>
    </html>

    显示效果:

     实例2,返回内容为json字符串时,dataType使用'json'

    data.txt 文件:

    {"name":"Milton","age":18}

    jq_get.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery get</title>
    </head>
    <body>
    <input type="submit" onclick="SendRequest();"/>
    
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        function SendRequest() {
            jQuery.get({
                url: 'data.txt',
                dataType: 'json',
                success: function (data, textStatus, xmlhttpRequest) {
                    console.log(data, typeof  data);
                    console.log(textStatus);
                    console.log(xmlhttpRequest);
                }
            });
        }
    </script>
    </body>
    </html>

    显示结果:

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

    描述: 使用一个HTTP POST 请求从服务器加载数据。

    所有参数:

        url: 待载入页面的URL地址

       data: 待发送 key/value 参数

     success: 载入成功时回调函数

    dataType: 返回内容格式,xml,json,script,text,html

    这是一个 Ajax 函数的简写形式,这相当于:

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

    jQuery.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )

    使用一个HTTP GET请求从服务器加载JSON编码的数据。

    所有参数:

        url: 待载入页面的URL地址

       data: 发送给服务器的字符串或Key/value键值对。

     success: 当请求成功后执行的回调函数。

    这是一个Ajax函数的缩写,这相当于:

    $.ajax({
      dataType: "json",
      url: url,
      data: data,
      success: success
    });

    jQuery.getScript( url [, success(script, textStatus, jqXHR) ] )

    使用一个HTTP GET请求从服务器加载并执行一个 JavaScript 文件

    所有参数:

        url: 待载入页面的URL地址

     success: 当请求成功后执行的回调函数。

    这是一个Ajax函数的缩写,这相当于:

    $.ajax({
      url: url,
      dataType: "script",
      success: success
    });

     


    ***微信扫一扫,关注“python测试开发圈”,了解更多测试教程!***
  • 相关阅读:
    团队作业第三次——项目需求分析
    快乐就队——第八次站立式会议(05-02)
    快乐就队——第七次站立式会议(04-30)
    快乐就队——第六次站立式会议(04-29)
    快乐就队——第五次站立式会议(04-28)
    快乐就队——第四次站立式会议(04-27)
    快乐就队——第三次站立式会议(04-26)
    快乐就队——第二次站立式会议(04-25)
    快乐就队——第一次站立式会议(04-24)
    快乐就队——项目系统设计与数据库设计
  • 原文地址:https://www.cnblogs.com/guanfuchang/p/6639248.html
Copyright © 2011-2022 走看看