1、jquery ajax中的使用方式
$.ajax({
url: "服务器端接口地址",
type:"get或post",
//如果需要传参:
data:{ 参数名1:值1, 参数名2:值2, ... },
dataType:"json", //自动调用JSON.parse()
//当请求响应成功后,自动执行
//并自动将服务器端返回的结果,经过JSON.parse()转换后,交给result参数变量
success:function(result){
result就是服务器端返回的结果。
}
})
AJAX是永远的异步请求方式,作用就是为了异步获取服务器端数据;所有要在ajax请求之后才能执行的代码,必须都要放在success:function(){内部!}
2、jquery AJAX中的参数详解
在【$.ajax()】的方式中,参数,数据处理等都是以对象的方式传递的,
$.ajax({参数})
参数对象:
$.ajax({
async:true,// 布尔值,表示请求是否异步处理。默认是 true。
url:'http://127.0.0.1:8080/tedu/userlist',// 规定发送请求的 URL。默认是当前页面。
type:get,//默认是get 规定请求的类型(GET 或 POST)。
dataType:'json',// 预期的服务器响应的数据类型。
data :{/*这里一般是表单提交的时候使用到的,使用对象的方式提交*/},//规定要发送到服务器的数据。
contentType :'json',// 发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。
timeout:3000,// 设置本地的请求超时时间(以毫秒计)。
global:true,// 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
cache:true,// 布尔值,表示浏览器是否缓存被请求页面。默认是 true。
context:$(this),// 为所有 AJAX 相关的回调函数规定 "this" 值。
beforeSend(xhr),// 发送请求前运行的函数。
success:success(result,status,xhr),// 当请求成功时运行的函数。
error:error(xhr,status,error),// 如果请求失败要运行的函数。
complete:complete(xhr,status)// 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。
})
3、jQuery load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);
下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中:
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/try/ajax/demo_test.txt");
});
});
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:
$("button").click(function(){
$("#div1").load("/try/ajax/demo_test.txt #p1");
});
});
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
4、jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
$.get(URL,callback);
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
5、jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
$.post(URL,data,callback);
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
6、总结
安全性
get方法的数据可以在地址栏看到,因为使用get方法会将查询数据拼接到地址栏
post是流方式传递,经内存,不在网址显示,安全性比get更高
大小
GET 方法因为地址栏中url的限制,传输的数据时有限的
POST 方法使用流方式传递,数据量比get更高,约为8M左右
作用
get主要可以用来获取信息,post主要用于提交信息