Ajax疊加(Ajax返回?cái)?shù)據(jù)用Ajax發(fā)出)示例代碼
更新時(shí)間:2013年08月21日 15:05:07 作者:
把參數(shù)用Ajax發(fā)送到數(shù)據(jù)庫(kù)進(jìn)行查詢?nèi)缓笥肁jax將數(shù)據(jù)發(fā)送到數(shù)據(jù)庫(kù)簽到表,于是有了下面的代碼,感興趣的朋友可以了解下,希望對(duì)大家學(xué)習(xí)ajax有所幫助
最近在做人事管理系統(tǒng)的一個(gè)簽到功能,首先是把部門(mén)當(dāng)做參數(shù),把參數(shù)用Ajax發(fā)送到數(shù)據(jù)庫(kù)進(jìn)行查詢,然后以表格形式動(dòng)態(tài)生成員工信息到返回頁(yè)面的Div里,表格最后的一列是簽到按鈕,這時(shí)我想用JQuery繼續(xù)獲取被點(diǎn)擊的“簽到”按鈕,然后用Ajax將數(shù)據(jù)發(fā)送到數(shù)據(jù)庫(kù)簽到表,更新簽到表,于是我就把每個(gè)簽到按鈕的id屬性設(shè)置成第一次Ajax返回的每個(gè)員工信息的工號(hào),再次用JQuery獲取,怎么獲取呢?想到了標(biāo)簽加事件選擇器,于是寫(xiě)了下面代碼:
$(function(){
$("tr input:button").click(){
$.ajax({
type: "POST",
url: "page_helper.ashx",
data: "name=K&pid" + $(this).attr("id"),
success: function (html) {
$("#ReturnHTML").html(html);
},
error: function () {
alert("服務(wù)器繁忙,請(qǐng)稍后再試!");
}
});
}
});
可是后來(lái)點(diǎn)擊卻發(fā)現(xiàn)沒(méi)有獲取到點(diǎn)擊事件,點(diǎn)擊按鈕根本就沒(méi)有反應(yīng),當(dāng)我用瀏覽器查看返回的源碼的時(shí)候,發(fā)現(xiàn)原來(lái)Ajax返回的HTML代碼根本就沒(méi)有被添加到頁(yè)面中,這回怎么辦呢?后來(lái)去百度里檢索了半天,都說(shuō)Ajax返回的數(shù)據(jù)無(wú)法用瀏覽器查看到源碼,因?yàn)槭钱惒降?,檢索了一天,頭又大又疼,于是就晚上了,每次遇到大的問(wèn)題,就趕緊睡覺(jué),在夢(mèng)中想實(shí)現(xiàn)方法,這樣一方面可以休息,另一方面也可以解決問(wèn)題,一般的時(shí)候第二天問(wèn)題都會(huì)有答案,也都能實(shí)現(xiàn)。
第二天早晨醒來(lái),思路還是沒(méi)有,我想這次應(yīng)該是大問(wèn)題了,是不是我想要實(shí)現(xiàn)的不可能實(shí)現(xiàn)呢?百度里幾乎沒(méi)有用兩次Ajax請(qǐng)求的,無(wú)奈之下在QQ空間發(fā)布了懸賞求助,懸賞是宴請(qǐng)三天三夜,后來(lái)終于我偉大的高中同學(xué)給了我?guī)椭?,?dāng)然不是因?yàn)閼屹p才幫助我的,哈哈哈。
高中同學(xué)是這么說(shuō)的,Jquery中有個(gè)live方法,可以獲取動(dòng)態(tài)生成的HTML代碼元素,后來(lái)我就把live方法敲了進(jìn)去,看了有三個(gè)參數(shù)event,data,function;于是查看了Jquery的幫助文檔。
event:必需,規(guī)定附加到元素的一個(gè)或多個(gè)事件,由空格分隔多個(gè)事件。必須是有效的事件。
data:可選,規(guī)定傳遞到該函數(shù)的額外數(shù)據(jù)。
function:必需,規(guī)定當(dāng)前事件發(fā)生時(shí)運(yùn)行的函數(shù)。
這時(shí)的我這時(shí)大旱逢甘霖啊,于是寫(xiě)下下面代碼:
$(function(){
$("tr input:button").live("click", function () {
$.ajax({
type: "POST",
url: "page_helper.ashx",
data: "name=JS&pid=" + $(this).attr("id") + jsparam(),
success: function (html) {
alert(html);
},
error: function () {
alert("服務(wù)器繁忙,請(qǐng)稍后再試!");
});
}
});
這次奇跡出現(xiàn)了,Ajax返回的按鈕單擊事件被獲取到了,下面的Ajax異步過(guò)程也調(diào)用成功了,那種喜悅不能言表。
如果我放棄了這次求助,以后遇到同樣的問(wèn)題,我可能換一種思路,會(huì)用a標(biāo)簽代替按鈕,跳轉(zhuǎn)到另一界面,操作起來(lái)太麻煩了,哪個(gè)用戶見(jiàn)到這樣的效果都會(huì)惡心至極,同學(xué)這樣的幫助豈三天三夜的宴請(qǐng)足矣?
復(fù)制代碼 代碼如下:
$(function(){
$("tr input:button").click(){
$.ajax({
type: "POST",
url: "page_helper.ashx",
data: "name=K&pid" + $(this).attr("id"),
success: function (html) {
$("#ReturnHTML").html(html);
},
error: function () {
alert("服務(wù)器繁忙,請(qǐng)稍后再試!");
}
});
}
});
可是后來(lái)點(diǎn)擊卻發(fā)現(xiàn)沒(méi)有獲取到點(diǎn)擊事件,點(diǎn)擊按鈕根本就沒(méi)有反應(yīng),當(dāng)我用瀏覽器查看返回的源碼的時(shí)候,發(fā)現(xiàn)原來(lái)Ajax返回的HTML代碼根本就沒(méi)有被添加到頁(yè)面中,這回怎么辦呢?后來(lái)去百度里檢索了半天,都說(shuō)Ajax返回的數(shù)據(jù)無(wú)法用瀏覽器查看到源碼,因?yàn)槭钱惒降?,檢索了一天,頭又大又疼,于是就晚上了,每次遇到大的問(wèn)題,就趕緊睡覺(jué),在夢(mèng)中想實(shí)現(xiàn)方法,這樣一方面可以休息,另一方面也可以解決問(wèn)題,一般的時(shí)候第二天問(wèn)題都會(huì)有答案,也都能實(shí)現(xiàn)。
第二天早晨醒來(lái),思路還是沒(méi)有,我想這次應(yīng)該是大問(wèn)題了,是不是我想要實(shí)現(xiàn)的不可能實(shí)現(xiàn)呢?百度里幾乎沒(méi)有用兩次Ajax請(qǐng)求的,無(wú)奈之下在QQ空間發(fā)布了懸賞求助,懸賞是宴請(qǐng)三天三夜,后來(lái)終于我偉大的高中同學(xué)給了我?guī)椭?,?dāng)然不是因?yàn)閼屹p才幫助我的,哈哈哈。
高中同學(xué)是這么說(shuō)的,Jquery中有個(gè)live方法,可以獲取動(dòng)態(tài)生成的HTML代碼元素,后來(lái)我就把live方法敲了進(jìn)去,看了有三個(gè)參數(shù)event,data,function;于是查看了Jquery的幫助文檔。
event:必需,規(guī)定附加到元素的一個(gè)或多個(gè)事件,由空格分隔多個(gè)事件。必須是有效的事件。
data:可選,規(guī)定傳遞到該函數(shù)的額外數(shù)據(jù)。
function:必需,規(guī)定當(dāng)前事件發(fā)生時(shí)運(yùn)行的函數(shù)。
這時(shí)的我這時(shí)大旱逢甘霖啊,于是寫(xiě)下下面代碼:
復(fù)制代碼 代碼如下:
$(function(){
$("tr input:button").live("click", function () {
$.ajax({
type: "POST",
url: "page_helper.ashx",
data: "name=JS&pid=" + $(this).attr("id") + jsparam(),
success: function (html) {
alert(html);
},
error: function () {
alert("服務(wù)器繁忙,請(qǐng)稍后再試!");
});
}
});
這次奇跡出現(xiàn)了,Ajax返回的按鈕單擊事件被獲取到了,下面的Ajax異步過(guò)程也調(diào)用成功了,那種喜悅不能言表。
如果我放棄了這次求助,以后遇到同樣的問(wèn)題,我可能換一種思路,會(huì)用a標(biāo)簽代替按鈕,跳轉(zhuǎn)到另一界面,操作起來(lái)太麻煩了,哪個(gè)用戶見(jiàn)到這樣的效果都會(huì)惡心至極,同學(xué)這樣的幫助豈三天三夜的宴請(qǐng)足矣?
相關(guān)文章
Ajax實(shí)現(xiàn)表格中信息不刷新頁(yè)面進(jìn)行更新數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了Ajax實(shí)現(xiàn)表格中的信息不刷新頁(yè)面進(jìn)行更新數(shù)據(jù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10ajax無(wú)刷新分頁(yè)的簡(jiǎn)單實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了ajax無(wú)刷新分頁(yè)的簡(jiǎn)單實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05利用AjaxControlToolkit實(shí)現(xiàn)百度搜索時(shí)的下拉列表提示詳細(xì)步驟
AjaxControlToolkit是一組控件的集合,可以實(shí)現(xiàn)自動(dòng)補(bǔ)充文本框,點(diǎn)擊文本框彈出日歷,加水印等Ajax效果等等,感興趣的朋友可以了解下啊,或許本文對(duì)你學(xué)習(xí)ajax有所幫助2013-02-02關(guān)于Ajax異步請(qǐng)求后臺(tái)數(shù)據(jù)進(jìn)行動(dòng)態(tài)分頁(yè)功能
這篇文章主要介紹了Ajax異步請(qǐng)求后臺(tái)數(shù)據(jù)進(jìn)行動(dòng)態(tài)分頁(yè)功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2018-06-06Ajax二級(jí)聯(lián)動(dòng)菜單實(shí)現(xiàn)原理及代碼
二級(jí)聯(lián)動(dòng)菜單,一個(gè)多么方便且實(shí)用的用戶交互功能,有需求的朋友可以參考下本文,或許對(duì)你的菜單知識(shí)深入學(xué)習(xí)有幫助,好了,閑話不多說(shuō),看代碼吧2013-01-01強(qiáng)烈推薦-ajax開(kāi)發(fā)者必看的文章
強(qiáng)烈推薦-ajax開(kāi)發(fā)者必看的文章...2007-03-03