科普: what's ajax
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
why's JQuery ajax
传统的Javascript 上使用 ajax, 要输入一大堆东西, 但是JQuery库把ajax进行封装,使用起来方便且出错的概率比JS低很多.
此文旨在从零开始教你使用jquery的ajax,结合的是我目前在银行开发的小型培训系统, 我使用的开发语言是jsp,其他的asp, php等也是同理的. 如有说得不对的地方, 望请见谅且指教!
首先, 在网页上, 先引用JQuery库:
<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
至于使用哪个版本的JQuery, 看个人喜好吧, 不过从2.0版本开始, JQuery就不支持IE8以下的, 不过目前一般都会使用IE9以上了,使用其他浏览器的(Chrome等)就不用考虑版本了,直接用最新版吧, 不过如果你跟我处在死板的银行等单位的话, 乖乖地用2.0以下的版本吧!
导入以后, 就可以使用写ajax了, 在引用库的语句下面,输入:
<script type="text/javascript">
function 函数名() {
$.ajax({
cache : false,
type : "POST",//post形式发送,也可以设置成get
url : "/web/admin/manage/index.jsp", //把表单数据发送到index.jsp
data : $('#formID').serialize(), //要发送的是form的id为"formID"的表单中的数据
async : false,//false为异步更新, true为同步更新
error : function(request) {
alert("发送请求失败！");//发送失败时,弹出警告框
},
success : function(data) {
$("#divID").html(data); //将返回的结果显示到id为"divID"的地方中
}
});
}
<script>
至此, 以表单形式提交的ajax就能实现了.
如果发送的数据不是表单, 可以改成:
<script type="text/javascript">
function 函数名() {
$.ajax({
cache : false,
url : "/web/admin/manage/index.jsp", //把表单数据发送到index.jsp
dataType: "json",//json形式发送
data : ["key1":"value1"，"key2":"value2",...], //要发送数据,前者是参数名,后者是参数值,以逗号隔开
async : false,//false为异步更新, true为同步更新
error : function(request) {
alert("发送请求失败！");//发送失败时,弹出警告框
},
success : function(data) {
$("#divID").html(data); //将返回的结果显示到id为"divID"的地方中
}
});
}
<script>
引申, 很多时候, 服务器的加载是需要时间的, 当进行ajax提交数据时, 在等待中, 我们希望能显示加载中等字样, 我的思路是:
网页中先设置一个加载中的容器,样式设置成不显示, 例子如下:
<div id="loading" style="position:fixed;left:45%;top:40%;display:none">
<img alt="loading" src="./img/loading.gif">
<h3>加载中...</h3>
</div>
然后, ajax 改成如下:
<script type="text/javascript">
function 函数名() {
$.ajax({
befordSend:function(){
$('#loading').show();
},
cache : false,
type : "POST",//post形式发送,也可以设置成get
url : "/web/admin/manage/index.jsp", //把表单数据发送到index.jsp
data : $('#formID').serialize(), //要发送的是form的id为"formID"的表单中的数据
async : false,//false为异步更新, true为同步更新
error : function(request) {
alert("发送请求失败！");//发送失败时,弹出警告框
},
success : function(data) {
$("#divID").html(data); //将返回的结果显示到id为"divID"的地方中
},
complete:function(){
$('#loading').hide();
}
});
}
<script>
提醒, 要正常显示加载中, async 必须设置成 false ! 我当时就是设置成true, 一直没成功, 找原因还找了很久! 哭死在路上...
end...祝愉快~
