JQuery中的Ajax

JQueryAjax使用

JQuery作为最受欢迎的js框架之一,常见的Ajax已经帮助我们封装好了,只需要调用即可,更为详细的api文档可以查阅:w3cSchool_JQueryAjax

$.get()方法

使用get方法向服务器获取数据

  • 参数列表
参数 描述
url 必需。规定将请求发送的哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
success(response,status,xhr) 可选。规定当请求成功时运行的函数。

额外的参数:

  • response – 包含来自请求的结果数据
  • status – 包含请求的状态
  • xhr – 包含 XMLHttpRequest 对象
dataType 可选。规定预计的服务器响应的数据类型。

默认地,jQuery 将智能判断。

可能的类型:

  • “xml”
  • “html”
  • “text”
  • “script”
  • “json”
  • “jsonp”
  • 使用演示: jq_ajax_get.gif-1288.8kB

格式化表单$(‘form’).serialize()

我们在向服务器提交数据时,如果使用的是Ajax需要手动将数据格式化name=fox&age=18类似这样的格式,JQuery已经帮助我封装好了一个格式化数据的方法

  • 语法:$(selector).serialize() 直接可以将form中拥有name属性的表单元素的字,进行格式化
  • 示例代码:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>测试jq_serialize方法</title>
      <script type="text/javascript" src="./files/jquery.min.js"></script>
      <script type="text/javascript">
          $(function(){
              $("#getFormInfo").on("click",function(){
                  var info = $("#testForm").serialize()
                  console.log(info);
              })
          })
      </script>
    </head>
    <body>
      <form id="testForm">
          <input type="text" placeholder="您的姓名" name="userName">
          <input type="text" placeholder="您的爱好" name="userHabbit">
          <input type="text" placeholder="您最喜爱的食物" name="userHabbit">
      </form>
      <input type="button" value="格式化表单数据" id="getFormInfo">
    </body>
    </html>
    
  • 演示效果

jq_ajax_serialize.gif-354.2kB

$.post()方法

通过post的方式向服务器获取数据

  • 参数列表:
参数 描述
url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType 可选。规定预期的服务器响应的数据类型。

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

  • 示例代码:
$.post("01.post.php",data,function(backData){
    console.log(backData);
})

$.ajax({}) 方法

$.ajax()方法相比于前面的方法,拥有更为自由的定制性,可以替换$.get(),$.post()方法

  • 参数:
    • w3cSchool_$.ajax_Api中,关于参数只有下列一个.实际使用中,传递的是一个对象
    • 而对象的属性在页面的下方,如图

      jq_ajax_ajax.gif-925.7kB

参数 描述
settings 可选。用于配置 Ajax 请求的键值对集合。

可以通过 $.ajaxSetup() 设置任何选项的默认值。

  • 示例代码:
    • 这里演示的是常用的属性
$.ajax({
        url:'01.php',//请求地址
        data:'name=fox&age=18',//发送的数据
        type:'GET',//请求的方式
        success:function (argument) {},// 请求成功执行的方法
        beforeSend:function (argument) {},// 在发送请求之前调用,可以做一些验证之类的处理
        error:function (argument) {console.log(argument);},//请求失败调用
    })

发表评论

邮箱地址不会被公开。 必填项已用*标注