JQueryAjax使用
JQuery作为最受欢迎的js框架之一,常见的Ajax已经帮助我们封装好了,只需要调用即可,更为详细的api文档可以查阅:w3cSchool_JQueryAjax
$.get()方法
使用
get方法向服务器获取数据
- 参数列表
| 参数 | 描述 |
|---|---|
| url | 必需。规定将请求发送的哪个 URL。 |
| data | 可选。规定连同请求发送到服务器的数据。 |
| success(response,status,xhr) | 可选。规定当请求成功时运行的函数。
额外的参数：
|
| dataType | 可选。规定预计的服务器响应的数据类型。
默认地，jQuery 将智能判断。 可能的类型：
|
- 使用演示:
格式化表单$(‘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);},//请求失败调用
})