詳解jQuery中關(guān)于Ajax的幾個(gè)常用的函數(shù)
一:
AJAX 是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下,能夠更新部分網(wǎng)頁(yè)的技術(shù)。
什么是 AJAX ?
AJAX = 異步 JavaScript 和 XML。
AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。
通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下,對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
傳統(tǒng)的網(wǎng)頁(yè)(不使用 AJAX)如果需要更新內(nèi)容,必需重載整個(gè)網(wǎng)頁(yè)面。
有很多使用 AJAX 的應(yīng)用程序案例:新浪微博、Google 地圖、開心網(wǎng)等等。
二:傳統(tǒng)的Ajax過于繁瑣,jquer封裝了一些ajax常用的簡(jiǎn)單函數(shù)。
a: $.ajax()方法:
jsp頁(yè)面代碼 :
<head>
<title>Ajax驗(yàn)證</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function () {
$("[name='userName']").blur(function () {
$.ajax({
type: "post",
url: "/TestServlet",
data:{action:"login"}, //data 傳遞的參數(shù)一般都是key:“ value” 類型的 value一定要加引號(hào) 我親身體驗(yàn) 那種找不到錯(cuò)的感覺
// dataType:'Text', //servers 返回的格式 也可以是gjon
success: function (data) {
if (data == "success") {
alert(data);
$("#myspan").html(data);
}
},
error: function () { //這個(gè)用的比較少
}
})
})
})
</script>
</head>
<body>
姓名: <input name="userName" type="text"><span id="myspan"></span>
密碼: <input name="password" type="text">
</body>
servlet后臺(tái)代碼:
public class TestServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("action");
System.out.println(name);
if(name.equals("login")){
response.getWriter().write("success"); //返回回掉函數(shù)的參數(shù)
}else{
response.getWriter().write("file");
}
}
b:$.get() , $.post()和 $.getJson方法都是$.ajax()方法的精簡(jiǎn)版,用法大致一致,少了一個(gè)type
$.post("/TestServlet",
{"uname":$('[name=uname]').val()},
function (data) {
alert(data);
});
c: $.load()
$("#msg").load( //可以直接拿到文本框 的值
"/TestServlet","action="+$('[name="userName"]').val()
);
//后臺(tái)可以直接 根據(jù)request.getParameter()拿到參數(shù)的值
d:$(selector).serializeArray() 和$(selector).serialize()
//這種方法 可以直接 獲得form表單的name屬性值,作為data的傳參
var data1 = $("#form1").serializeArray(); //自動(dòng)將form表單封裝成json
$.each(data1,function (i,dom) {
alert(dom.name+"\r\n"+dom.value);
});
var data2=$("#form1").serialize();
alert(data2);
e:作為data參數(shù)
var data2=$("#form1").serialize();
$.getJSON("/TestServlet",data2, function (data) {
alert(data);
});
以上所述是小編給大家介紹的jQuery中關(guān)于Ajax的幾個(gè)常用的函數(shù),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- jQuery實(shí)現(xiàn)ajax回調(diào)函數(shù)帶入?yún)?shù)的方法示例
- 基于jquery trigger函數(shù)無(wú)法觸發(fā)a標(biāo)簽的兩種解決方法
- jQuery使用bind函數(shù)實(shí)現(xiàn)綁定多個(gè)事件的方法
- jQuery中extend函數(shù)簡(jiǎn)單用法示例
- jQuery中clone()函數(shù)實(shí)現(xiàn)表單中增加和減少輸入項(xiàng)
- jquery中封裝函數(shù)傳遞當(dāng)前元素的方法示例
- jQuery中map函數(shù)的兩種方式
- jquery封裝插件時(shí)匿名函數(shù)形參和實(shí)參的寫法解釋
- jQuery中常用動(dòng)畫效果函數(shù)知識(shí)點(diǎn)整理
相關(guān)文章
jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件實(shí)例代碼淺析
這篇文章主要介紹了jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
jQuery Ztree行政地區(qū)樹狀展示(點(diǎn)擊加載)
這篇文章主要為大家詳細(xì)介紹了Ztree行政地區(qū)樹狀展示,點(diǎn)擊加載數(shù)據(jù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11
jQuery簡(jiǎn)單實(shí)現(xiàn)iframe的高度根據(jù)頁(yè)面內(nèi)容自適應(yīng)的方法
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)iframe的高度根據(jù)頁(yè)面內(nèi)容自適應(yīng)的方法,給出了2種簡(jiǎn)單實(shí)現(xiàn)方法,涉及jQuery針對(duì)頁(yè)面高度的動(dòng)態(tài)獲取與設(shè)置相關(guān)技巧,需要的朋友可以參考下2016-08-08
jQuery插件擴(kuò)展實(shí)例【添加回調(diào)函數(shù)】
這篇文章主要介紹了jQuery插件擴(kuò)展的方法,結(jié)合實(shí)例形式分析了jQuery插件添加回調(diào)函數(shù)與事件觸發(fā)機(jī)制的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
jQuery實(shí)現(xiàn)可展開折疊的導(dǎo)航效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)可展開折疊的導(dǎo)航效果,結(jié)合實(shí)例形式分析了基于jquery.easing.1.3.js插件的展開折疊效果實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-09-09
jQuery為iframe的body添加click事件的實(shí)現(xiàn)代碼
jQuery為iframe的body添加click事件的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-04-04
jQuery實(shí)現(xiàn)行文字鏈接提示效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)行文字鏈接提示效果的方法,實(shí)例分析了jQuery操作文字提示效果的方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03

