Ajax 之 [ jQuery中的Ajax ]

jQuery中的Ajax

在jQuery中使用Ajax

• 在jQuery提供了一系列的方法来对Ajax进行操作

  • load()方法
  • $.get()方法
  • $.post()方法
  • ajax()方法
  • $.getScript()方法
  • $.getJSON()方法

load()方法

• 参数

  • 第一个参数 - 表示异步交互的请求地址

  • 第二个参数 - 表示异步交互的请求数据

    • 省略请求数据时，当前的请求方式为 GET
    • 发送请求数据时，当前的请求方式为 POST
  • 第三个参数 - 表示异步交互请求成功后的回调函数

• 该方法具有返回值

  • 服务器端的响应结果

注意

• 会自动将返回结果写到HTML页面的指定目标元素中

示例代码

按钮

$.get()方法

• 该方法的请求方式为 GET

• 参数

  • 第一个参数 - 表示异步交互的请求地址
  • 第二个参数 - 表示异步交互的请求数据

  • 第三个参数 - 表示异步交互请求成功后的回调函数

    • response参数 - 表示获取当前的JSON文件内容

  • 第四个参数 - 表示设置服务器端响应结果的格式

    • xml、html、script、json、text等

示例代码

按钮

$.post()方法

• 该方法的请求方式为 POST

• 参数

  • 第一个参数 - 表示异步交互的请求地址
  • 第二个参数 - 表示异步交互的请求数据

  • 第三个参数 - 表示异步交互请求成功后的回调函数

    • response参数 - 表示获取当前的JSON文件内容

  • 第四个参数 - 表示设置服务器端响应结果的格式

    • xml、html、script、json、text等

示例代码

按钮

ajax()方法

• 参数

  • 第一个参数 - 表示异步交互请求的地址

  • 第二个参数 - 表示设置异步交互请求的

    • 该参数的可选项
    • type - 设置当前的请求方式
    • data - 发送给服务器端的请求数据
    • dataType - 服务器端响应结果的格式

    • success - 异步交互请求成功后的回调函数

      • 回调函数的参数

        • data - 表示服务器端响应的结果
        • textStatus - 表示服务器端当前的状态
        • jqXHR - Ajax中的核心对象

示例代码

按钮

$.getScript()方法

• 该方法的请求方式为 GET

• 参数

  • 第一个参数 - 表示请求JavaScript文件的地址

  • 第二个参数 - 指定JavaScript文件加载成功的回调函数

    • 该回调函数的参数
    • data - 表示获取指定文件的内容

示例代码

按钮

$.getJSON()方法

• 该方法的请求方式为 GET

• 参数

  • 第一个参数 - 表示请求JavaScript文件的地址
  • 第二个参数 - 表示发送给服务器端的数据内容

  • 第三个参数 - 指定JavaScript文件加载成功的回调函数

    • 该回调函数的参数
    • data - 表示获取指定文件的内容

示例代码

按钮

异步提交表单

表单序列化

• 根据表单默认同步提交获取数据的方式

serialize()方法

• 将数据内容序列化为指定格式的字符串内容

serializeArray()方法

• 将数据内容序列化为JSON格式的数据内容

示例代码