AJAX 即 异步 JavaScript 和 XML(Asynchronous JavaScript and XML),是一种与服务器交换数据的技术,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。不同浏览器ajax的实现并不相同,为了兼容不同浏览器,使用传统的JS代码来实现ajax是比较繁杂的,但是使用jquery,实现起来就非常简单。
这里我使用本地服务器APM来发布网站,具体下载安装步骤可网上查询,启动APM之后将你的项目文件放入APMServ5.2.6\www\htdocs目录下即可,然后通过本地ip访问你的html文件,如我的地址是:http://127.0.0.1/a/Jquery/AJAX/index.html。当然你也可以可以使用其他的本地服务器,如Tomcat。
jQuery 的 AJAX 方法:
load()—$(selector).load(URL,data,callback); 从服务器加载数据,并把返回的数据放入被选元素中;
get()—$.get(URL,callback); 通过 HTTP GET 请求从服务器请求数据;
post()—$.post(URL,data,callback); 通过 HTTP POST 请求从服务器请求数据;
(1) load()—$(selector).load(URL,data,callback);
url:必选,加载的文件地址;
data:可选,规定与请求一同发送的查询字符串键/值对集合;
callback::可选,load() 方法完成后所执行的函数名称,其有三个可选参数,
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
用法:如加载text.txt中的内容,放在class="box"的div盒子中,加载成功或者失败都弹框提示:
$(function(){
$("button").click(function(){
$(".box").load("text.txt .myspan",function(responTxt,statusTxt,xhr){
if(statusTxt=="success"){
alert("加载成功 responTxt="+responTxt);
}else if(statusTxt=="error"){
alert("加载失败 xhr.status="+xhr.status+" xhr.statusText="+xhr.statusText);
}
});
});
})
(2) get()—$.get(URL,callback);
GET 基本上用于从服务器获得(取回)数据。GET 方法可能返回缓存数据。
url:必选,加载的文件地址;
callback:可选,get()方法完成后所执行的函数callback有两个参数,
data—被请求页面的内容;
status—请求的状态;
用法:从test.php中获取返回的数据,弹出提示框显示返回的数据和请求的状态:
jqeury使用ajax get方法请求php文件返回数据代码如下:
$(function(){
$("button").click(function(){
$.get("test.php",function(data,status){
alert("数据="+data+" status="+status);
});
})
});
其中test.php内容为:
<?php
echo '这是个从PHP文件中读取的数据。';
?>
alert中结果是:数据=这是个从PHP文件中读取的数据。 status=success
(3) post()—$.post(URL,data,callback);
POST常用于连同请求一起发送数据,也可用于从服务器获取数据。不过,POST 方法不会缓存数据。
url:必选,加载的文件地址;
data:可选,规定与请求一同发送的查询字符串键/值对集合;
callback::可选,load() 方法完成后所执行的函数名称,其有三个可选参数;
用法:从test_post.php中获取返回的数据,弹出提示框显示返回的数据和请求的状态:
jqeury使用ajax post方法请求php文件返回数据代码如下:
$(function(){
$("button").click(function(){
$.post("test_post.php",{
name:"我的csdn博客地址",
url:"http://blog.csdn.net/nongweiyilady"
},function(data,status){
alert("data="+data+"\nstatus="+status);
});
})
})
其中test_post.php内容为:
<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$url;
?>
alert中结果是:
data=网站名: 我的csdn博客地址
URL 地址: http://blog.csdn.net/nongweiyilady
status=success
本文资料参考来自:http://www.runoob.com/jquery/jquery-ajax-get-post.html