zoukankan      html  css  js  c++  java
  • jacascript Ajax 学习之 JQuery-Ajax

      jQuery 对 ajax 操作进行了封装,在 jQuery 中 $.ajax() 属性最底层的方法,第2层是 load()、$.get() 和 $.post() 方法,第3层是 $.getScript() 和 $.getJSON() 方法。

    load()

      load() 方法是 jQuery 中最简单和常用的 ajax 方法,使用 load() 方法通过 ajax 请求加载服务器中的数据,并把返回的数据放置到指定的元素中。

      【调用格式】

      load() 方法的调用格式为如下所示,参数 url 为加载服务器地址,可选项 data 参数为请求时发送的数据,callback 参数为数据请求成功后,执行的回调函数。

        <script>
            $('#id').load(url,[data],[callback]);
        </script>

      load() 方法默认使用 "GET" 方式,如果 data 参数提供一个对象,那么使用 "POST" 方式

    $.get() 和 $.post()

      $.get() 方法使用一个 "GET" 请求从服务器加载数据。

      $.get() 方法的调用格式如下所示,url 表示一个包含发送请求的 URL 字符串;data 表示发送给服务器的字符串或 Key/value 键值对;success(data, textStatus, jqXHR) 表示当请求成功后执行的回调函数;dataType 表示从服务器返回的预期的数据类型。

      $.post() 方法使用一个 "POST" 请求从服务器加载数据。post() 方法和 get() 方法的结构和使用方式都相同。但要注意的是,当load()方法带有数据参数传递时,会使用POST方式发送请求

        <script>
            $.get('test.php',{
                name: shane
            },function(data){
                //回调函数
            })
            
            $.post('test.php',{
                num: $('#num').val()
            },function(data){
                //回调函数
            })
        </script>

    getJSON() 和 getScript() 

      getJSON() 方法使用一个 "GET" 请求从服务器加载 JSON 编码的数据。

      getJSON() 方法的调用格式如下。其中,url 参数为请求加载 json 格式文件的服务器地址,可选项 data 参数为请求时发送的数据,callback 参数为数据请求成功后,执行的回调函数。回调函数中的第一个参数表示返回的数据。

      getScript() 方法使用一个 "GET" 请求从服务器加载并执行一个 javascript 文件。

      getScript() 方法调用格式如下,参数 url 为服务器请求地址,可选项 callback 参数为请求成功后执行的回调函数。

        <script>
            $.getJSON(url,[data],function (data) {
                //data: 返回的数据
            })
    
            $.getScript('test.js',function(){
            
            })
        </script>

    $.ajax()

      $.ajax()方法是最底层、功能最强大的请求服务器数据的方法,前面介绍的 load()、get()、post()、getScript()、getJSON() 等方法都是基于 ajax() 方法实现的。

      常用参数如下所示:

    • async 布尔值,表示请求是否异步处理。默认是 true。
    • beforeSend(xhr) 发送请求前运行的函数。可以用来设置请求头。
    • cache 布尔值,表示浏览器是否缓存被请求页面。默认是 true。
    • complete(xhr,status) 请求完成时运行的函数(在请求成功或失败之后均调用,即在success和error函数之后)
    • contentType 发送数据时使用的内容类型。默认是"application/x-www-form-urlencoded"
    • context 为所有 AJAX 相关的回调函数规定 "this" 值。
    • data 规定要发送到服务器的数据。
    • dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。
    • dataType 预期的服务器响应的数据类型。
    • error(xhr,status,error) 如果请求失败要运行的函数。
    • global 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
    • ifModified 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
    • jsonp 在一个 jsonp 中重写回调函数的字符串。
    • jsonpCallback 在一个 jsonp 中规定回调函数的名称。
    • password 规定在 HTTP 访问认证请求中使用的密码。
    • processData 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。
    • scriptCharset 规定请求的字符集。
    • success(result,status,xhr) 当请求成功时运行的函数。
    • timeout 设置本地的请求超时时间(以毫秒计)。
    • traditional 布尔值,规定是否使用参数序列化的传统样式。
    • type 规定请求的类型(GET 或 POST)。
    • url 规定发送请求的 URL。默认是当前页面。
    • username 规定在 HTTP 访问认证请求中使用的用户名。
    • xhr 用于创建 XMLHttpRequest 对象的函数。

    数据序列化

      当一个表单中字段较多,表单元素较复杂时,就需要一种方法来简化提取表单内部控件的值的操作,这一行为通常叫序列化,jQuery 提供了 param()、serialize() 和 serialzeArray() 这三个方法。

      param(obj) 方法用来创建一个数组或对象序列化的字符串,适用于一个 URL 地址查询字符串或 Ajax 请求。

      serialize() 方法将用作提交的表单元素的值编译成字符串,serialize() 方法的一个额外好处是会自动对键值对儿中的特殊字符进行编码。

      serializeArray() 方法将用作提交的表单元素的值编译成拥有 name 和 value 对象组成的数组,即 json 格式的数据。

     

  • 相关阅读:
    前端 CSS 基础
    前端 HTML基础
    前端 JavaScript基础
    GoldenGate 复制进程报错"OGG-01296 Error mapping",丢弃文件报错“Mapping problem with delete record (target format)”,且实际条目存在
    SaltStack 与 Python 程序的结合
    SUSE-11 本地 zypper 配置
    Centos-7 + Docker-1.12 中 devicemapper + direct_lvm 的 Docker 存储配置
    Docker-v17 的层级(layer)概念
    Oracle-11g 中使用表空间透明数据加密(TDE)
    SaltStack 的远程执行机制
  • 原文地址:https://www.cnblogs.com/sspeng/p/8570533.html
Copyright © 2011-2022 走看看