JQuery中的Ajax

JQueryAjax使用

jquery的ajax方法  (js原生的每个模块，jQuery基本上都有封装)

$.get() / $.post() ($.ajax()方法参数太复杂，简化的get/post)
参数：
    在写方法参数的时候，最好按照文档中的参数顺序来传
        尤其是data，如果写的位置写错，写在callback之后，会造成参数上传失败。$.get，更会直接报错，没有参数，URL拼接也成功不了
    可以通过参数来设置返回值类型 {‘json’}，jq内部会帮我们转化 , 如果返回值不是json格式的，转化失败，但是也不会报错，保持原样。默认是字符串

$.ajax()
参数：
    type: 可以指定是GET还是POST，不写默认是GET
    beforeSend: 发送之前调用的匿名函数，可以return false 阻止该次请求，用来验证一些东西
    success：
    error：

$.get()方法

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

参数列表

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(response,status,xhr)	可选。规定当请求成功时运行的函数。额外的参数：response - 包含来自请求的结果数据status - 包含请求的状态xhr - 包含 XMLHttpRequest 对象
dataType	可选。规定预计的服务器响应的数据类型。默认地，jQuery 将智能判断。可能的类型："xml""html""text""script""json""jsonp"

格式化表单$('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>

演示效果

$.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中,关于参数只有下列一个.实际使用中,传递的是一个对象
- 而对象的属性在页面的下方,如图

参数	描述
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);},//请求失败调用
    })

results matching ""

No results matching ""