jQuery学习 五 jQuery Ajax
来源：互联网 发布：单片机乐谱 编辑：程序博客网 时间：2024/05/01 23:49
jQuery学习 五 jQuery Ajax
五 jQuery Ajax
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
(1) $.ajax() 方法
<input id="username" class="input-text" type="text" name="username" />
<script>
$(document).ready(function(){
$("input").blur(function(){
var username = $("#username").val();
$.ajax({
type: "post",
url : "ajax_service.php",
dataType: "json",
async: true,// async用于控制同步和异步,默认是true即异步,改成false后，为同步
data:{
"username":username,
},
success: function(msg){
if(msg == 'ture'){
alert('此用户名已经存在！');
}
}
});
});
});
</script>
下面再介绍下ajax的异步和同步有和区别
jquery中ajax方法有个属性async用于控制同步和异步，默认是true,即ajax请求默认是异步请求，有时项目中会用到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面出现假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。而异步则这个AJAX代码运行中的时候其他代码一样可以运行。
ajax中async这个属性，用于控制请求数据的方式，默认是true，即默认以异步的方式请求数据。
一、async值为true （异步）
当ajax发送请求后，在等待server端返回的这个过程中，前台会继续 执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程 和ajax块后面的脚本（另一个线程）
例如
$.ajax({
type:"POST",
url:"ceshi.php?act=index",
dataType:"html",
success:function(result){ //function1()
f1();
f2();
}
failure:function (result) {
alert('Failed');
},
}
function2();
在上例中，当ajax块发出请求后，他将停留function1()，等待server端的返回，但同时（在这个等待过程中），前台会去执行function2()。
二、async值为false （同步）
当执行当前AJAX的时候会停止执行后面的JS代码，直到AJAX执行完毕后时，才能继续执行后面的JS代码。
例如
$.ajax({
type:"POST",
url:"ceshi.php?act=index",
dataType:"html",
async: false,
success:function(result){ //function1()
f1();
f2();
}
failure:function (result) {
alert('Failed');
},
}
function2();
当把asyn设为false时，这时ajax的请求时同步的，也就是说，这个时候ajax块发出请求后，他会等待在function1（）这个地方，不会去执行function2()，直到function1()部分执行完毕。
(2) jQuery load() 方法从服务器加载数据，并把返回的数据放入被选元素中。 $(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
<body>
<div id="div1"><h2>使用 jQuery AJAX</h2></div>
<button>获取外部内容</button>
</body>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/statics/demosource/demo_test.txt");
});
});
也可以把 jQuery 选择器添加到 URL 参数。
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：
$("button").click(function(){
$("#div1").load("/statics/demosource/demo_test.txt #p1");
});
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div>
<button>获取外部内容</button>
</body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/statics/demosource/demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
(3) AJAX get() 方法
1$.get() 方法通过 HTTP GET 请求从服务器上请求数据。语法：$.get(URL,callback);
$.get("/statics/demosource/demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
请求 "test.php"，但是忽略返回结果：
$.get("test.php");
请求 "test.php" 并连同请求发送一些额外的数据（忽略返回结果）：
$.get("test.php", { name:"Donald", town:"Ducktown" });
请求 "test.php" 并传递数据数组到服务器（忽略返回结果）：
$.get("test.php", { 'colors[]' : ["Red","Green","Blue"] });
请求 "test.php" 并提醒请求的结果：
$.get("test.php", function(data){
alert("Data: " + data);
});
(4)post() 方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。 语法：$.post(URL,data,callback)
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/statics/demosource/demo_test_post.php",
{
name:"W3Cschool教程",
url:"http://www.w3cschool.cn"
},
function(data,status){
alert("数据: " + data + "状态: " + status);
});
});
});
</script>
(5) getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。
$.getJSON("demo_ajax_json.js",function(result){
});
(6) 使用 Ajax 来获取JavaScript脚本并执行
$("button").click(function(){
$.getScript("demo_ajax_script.js");
});
(7) param() 方法创建数组或对象的序列化表示形式。
<body>
<button>序列化对象</button>
<div></div>
</body>
<script>
$(document).ready(function(){
personObj=new Object();
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=50;
personObj.eyecolor="blue";
$("button").click(function(){
$("div").text($.param(personObj));
});
});
</script>
(8) serialize() 方法通过序列化表单值创建 URL 编码文本字符串。
<form action="">
First name: <input type="text" name="FirstName" value="Mickey" /><br>
Last name: <input type="text" name="LastName" value="Mouse" /><br>
</form>
$("button").click(function(){
$("div").text($("form").serialize());//FirstName=Mickey&LastName=Mouse
});
(9) serializeArray() 方法通过序列化表单值来创建对象（name 和 value）的数组。
$("button").click(function(){
x=$("form").serializeArray();
$.each(x, function(i, field){
$("#results").append(field.name + ":" + field.value + " ");//FirstName:Mickey LastName:Mouse
});
});
五 jQuery Ajax
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
(1) $.ajax() 方法
<input id="username" class="input-text" type="text" name="username" />
<script>
$(document).ready(function(){
$("input").blur(function(){
var username = $("#username").val();
$.ajax({
type: "post",
url : "ajax_service.php",
dataType: "json",
async: true,// async用于控制同步和异步,默认是true即异步,改成false后，为同步
data:{
"username":username,
},
success: function(msg){
if(msg == 'ture'){
alert('此用户名已经存在！');
}
}
});
});
});
</script>
下面再介绍下ajax的异步和同步有和区别
jquery中ajax方法有个属性async用于控制同步和异步，默认是true,即ajax请求默认是异步请求，有时项目中会用到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面出现假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。而异步则这个AJAX代码运行中的时候其他代码一样可以运行。
ajax中async这个属性，用于控制请求数据的方式，默认是true，即默认以异步的方式请求数据。
一、async值为true （异步）
当ajax发送请求后，在等待server端返回的这个过程中，前台会继续 执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程 和ajax块后面的脚本（另一个线程）
例如
$.ajax({
type:"POST",
url:"ceshi.php?act=index",
dataType:"html",
success:function(result){ //function1()
f1();
f2();
}
failure:function (result) {
alert('Failed');
},
}
function2();
在上例中，当ajax块发出请求后，他将停留function1()，等待server端的返回，但同时（在这个等待过程中），前台会去执行function2()。
二、async值为false （同步）
当执行当前AJAX的时候会停止执行后面的JS代码，直到AJAX执行完毕后时，才能继续执行后面的JS代码。
例如
$.ajax({
type:"POST",
url:"ceshi.php?act=index",
dataType:"html",
async: false,
success:function(result){ //function1()
f1();
f2();
}
failure:function (result) {
alert('Failed');
},
}
function2();
当把asyn设为false时，这时ajax的请求时同步的，也就是说，这个时候ajax块发出请求后，他会等待在function1（）这个地方，不会去执行function2()，直到function1()部分执行完毕。
(2) jQuery load() 方法从服务器加载数据，并把返回的数据放入被选元素中。 $(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
<body>
<div id="div1"><h2>使用 jQuery AJAX</h2></div>
<button>获取外部内容</button>
</body>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/statics/demosource/demo_test.txt");
});
});
也可以把 jQuery 选择器添加到 URL 参数。
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：
$("button").click(function(){
$("#div1").load("/statics/demosource/demo_test.txt #p1");
});
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div>
<button>获取外部内容</button>
</body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/statics/demosource/demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
(3) AJAX get() 方法
1$.get() 方法通过 HTTP GET 请求从服务器上请求数据。语法：$.get(URL,callback);
$.get("/statics/demosource/demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
请求 "test.php"，但是忽略返回结果：
$.get("test.php");
请求 "test.php" 并连同请求发送一些额外的数据（忽略返回结果）：
$.get("test.php", { name:"Donald", town:"Ducktown" });
请求 "test.php" 并传递数据数组到服务器（忽略返回结果）：
$.get("test.php", { 'colors[]' : ["Red","Green","Blue"] });
请求 "test.php" 并提醒请求的结果：
$.get("test.php", function(data){
alert("Data: " + data);
});
(4)post() 方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。 语法：$.post(URL,data,callback)
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/statics/demosource/demo_test_post.php",
{
name:"W3Cschool教程",
url:"http://www.w3cschool.cn"
},
function(data,status){
alert("数据: " + data + "状态: " + status);
});
});
});
</script>
(5) getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。
$.getJSON("demo_ajax_json.js",function(result){
});
(6) 使用 Ajax 来获取JavaScript脚本并执行
$("button").click(function(){
$.getScript("demo_ajax_script.js");
});
(7) param() 方法创建数组或对象的序列化表示形式。
<body>
<button>序列化对象</button>
<div></div>
</body>
<script>
$(document).ready(function(){
personObj=new Object();
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=50;
personObj.eyecolor="blue";
$("button").click(function(){
$("div").text($.param(personObj));
});
});
</script>
(8) serialize() 方法通过序列化表单值创建 URL 编码文本字符串。
<form action="">
First name: <input type="text" name="FirstName" value="Mickey" /><br>
Last name: <input type="text" name="LastName" value="Mouse" /><br>
</form>
$("button").click(function(){
$("div").text($("form").serialize());//FirstName=Mickey&LastName=Mouse
});
(9) serializeArray() 方法通过序列化表单值来创建对象（name 和 value）的数组。
$("button").click(function(){
x=$("form").serializeArray();
$.each(x, function(i, field){
$("#results").append(field.name + ":" + field.value + " ");//FirstName:Mickey LastName:Mouse
});
});
0 0
- jQuery学习 五 jQuery Ajax
- jQuery学习大总结(五)jQuery Ajax
- jQuery学习大总结(五)jQuery Ajax
- jQuery学习大总结(五)jQuery Ajax
- 系统学习 jQuery （五） AJAX
- jQuery在学习之五、jQuery的ajax
- jQuery在学习之五、jQuery的ajax
- Jquery学习--Jquery Ajax函数
- jQuery学习笔记--jQuery Ajax
- jquery（五）jquery中的ajax详解
- jquery 实现原理五：ajax
- jQuery 笔记之五 ajax
- jquery学习（五）
- jQuery Mobile 学习五
- jQuery学习(五)
- ajax,jquery学习资源
- jquery ajax学习
- jQuery Ajax 函数学习
- Go语言 Select 详细解读
- oozie hdfs demo
- iOS开发 cocoaPod和Carthage的安装与使用
- SQL Server-聚焦事务对本地变量、临时表、表变量影响以及日志文件存满时如何收缩（三十一）
- 数据仓库中的Inmon与Kimball架构之争
- jQuery学习 五 jQuery Ajax
- (40)Java学习笔记——IO流技术 / File类
- 真正与Activity能交互的回调以及Activity退入后台方法
- cocos-JS开发笔记集合
- Android Studio中依赖Jar详解
- STL之set
- PHP操作sql数据库
- Anroid中MediaMuxer,MediaCodec,MediaExtractor用例
- iOS报-[__NSDictionaryI objectAtIndexedSubscript:]: unrecognized selector sent to instance 0x15f762920
