Ajax異步提交表單數(shù)據(jù)的說(shuō)明及方法實(shí)例
場(chǎng)景描述:
對(duì)于一個(gè)登錄頁(yè)面中有一個(gè)登錄的表單,但是由于登錄驗(yàn)證邏輯比較復(fù)雜,我們希望點(diǎn)擊登錄后不刷新當(dāng)前頁(yè)面,給出登錄結(jié)果后再選擇是跳到新的頁(yè)面還是提示用戶(hù)名密碼錯(cuò)誤。類(lèi)似這樣的問(wèn)題很多很多。異步獲取數(shù)據(jù)使用戶(hù)體驗(yàn)大大增強(qiáng)。
背景知識(shí):
Ajax指的是異步JavaScript及XML(Asynchronous JavaScript And XML)。
AJAX 不是一種新的編程語(yǔ)言,而是一種用于創(chuàng)建更好更快以及交互性更強(qiáng)的
Web 應(yīng)用程序的技術(shù)。通過(guò)AJAX,您的JavaScript 可使用JavaScript 的XMLHttpRequest 對(duì)象來(lái)直接與服務(wù)器進(jìn)行通信。通過(guò)這個(gè)對(duì)象,您的JavaScript 可在不重載頁(yè)面的情況與Web 服務(wù)器交換數(shù)據(jù)。AJAX
在瀏覽器與Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸(HTTP 請(qǐng)求),這樣就可使網(wǎng)頁(yè)從服務(wù)器請(qǐng)求少量的信息,而不是整個(gè)頁(yè)面。AJAX 可使因特網(wǎng)應(yīng)用程序更小、更快,更友好。AJAX
是一種獨(dú)立于Web 服務(wù)器軟件的瀏覽器技術(shù)?!JAX 基于下列Web 標(biāo)準(zhǔn):JavaScript XML HTML CSS 在AJAX 中使用的Web 標(biāo)準(zhǔn)已被良好定義,并被所有的主流瀏覽器支持。AJAX 應(yīng)用程序獨(dú)立于瀏覽器和平臺(tái)。Web
應(yīng)用程序較桌面應(yīng)用程序有諸多優(yōu)勢(shì);它們能夠涉及廣大的用戶(hù),它們更易安裝及維護(hù),也更易開(kāi)發(fā)。 不過(guò),因特網(wǎng)應(yīng)用程序并不像傳統(tǒng)的桌面應(yīng)用程序那樣完善且友好。
通過(guò)AJAX,因特網(wǎng)應(yīng)用程序可以變得更完善,更友好。
具體用法:
<script type="text/javascript">
(function(){
jQuery('#loginForm').click(
function() {
jQuery('#tips').html("正在登錄.....");
jQuery.post(
<span style="white-space:pre"> </span>'login.action',
<span style="white-space:pre"> </span>{
<span style="white-space:pre"> </span>"username":jQuery('#username').val(),
<span style="white-space:pre"> </span>"password":jQuery('#password').val()
<span style="white-space:pre"> </span>},
<span style="white-space:pre"> </span>function(result) {
jQuery('#tips').html(result);
<span style="white-space:pre"> </span>},
<span style="white-space:pre"> </span>"json"
<span style="white-space:pre"> </span>);
}
);
})();
</script>
post方法中有四個(gè)參數(shù)。
第一個(gè)是url地址,在struts2中,我們只需要提交給對(duì)應(yīng)的action即可,或者指定方法。對(duì)于webx,我們需要這樣寫(xiě)url地址login.htm?action=user_login&event_submit_do_user_login=any
第二個(gè)是參數(shù)列表,你要提交的數(shù)據(jù),以鍵值對(duì)形式提交。
第三個(gè)參數(shù)是結(jié)果處理函數(shù),那么結(jié)果將從result中取出。
第四個(gè)參數(shù)是數(shù)據(jù)返回格式。
那么action或者screen中需要做的處理是:
HttpServletResponse response = rundata.getResponse();
response.setContentType("application/json");
PrintWriter out;
try {
out = response.getWriter();
String result = (String) context.get("result");
JSONObject json = new JSONObject();
json.put("result", result);
out.print(json);
out.flush();
} catch (IOException e) {
e.printStackTrace();
}
輸入處理結(jié)果即可。
- jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼
- jquery下異步提交表單 異步跨域提交表單
- Jquery.Form 異步提交表單的簡(jiǎn)單實(shí)例
- Javascript異步表單提交,圖片上傳,兼容異步模擬ajax技術(shù)
- ajax jquery 異步表單驗(yàn)證示例代碼
- yii2 modal彈窗之ActiveForm ajax表單異步驗(yàn)證
- ajax異步處理POST表單中的數(shù)據(jù)示例代碼
- Jquery異步提交表單代碼分享
- javascript將異步校驗(yàn)表單改寫(xiě)為同步表單
- jQuery異步提交表單的兩種方式
相關(guān)文章
bootstrapValidator bootstrap-select驗(yàn)證不可用的解決辦法
這篇文章主要為大家詳細(xì)介紹了bootStrapValidator和bootStrap-select驗(yàn)證不可用的解決辦法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01JavaScript基礎(chǔ)篇(3)之Object、Function等引用類(lèi)型
這篇文章主要介紹了JavaScript基礎(chǔ)篇(3)之Object、Function等引用類(lèi)型的相關(guān)資料,需要的朋友可以參考下2015-11-11使用原生js實(shí)現(xiàn)頁(yè)面蒙灰(mask)效果示例代碼
像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果,當(dāng)然jquery也提供了這種蒙灰方法,下面有個(gè)示例,大家可以參考下2014-06-06JS將時(shí)間秒轉(zhuǎn)換成天小時(shí)分鐘秒的字符串
最近小編接到這樣的項(xiàng)目需求,接口返回的數(shù)據(jù)中時(shí)間單位為秒,但前端顯示的時(shí)候需要更人性化的帶有單位(天,小時(shí),分鐘,秒)的字符串;下面小編給大家?guī)?lái)實(shí)例代碼,感興趣的朋友跟隨小編一起看看吧2019-07-07JavaScript通過(guò)setTimeout實(shí)時(shí)顯示當(dāng)前時(shí)間的方法
這篇文章主要介紹了JavaScript通過(guò)setTimeout實(shí)時(shí)顯示當(dāng)前時(shí)間的方法,涉及javascript操作時(shí)間顯示的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04JavaScript ES5標(biāo)準(zhǔn)中新增的Array方法
這篇文章主要介紹了JavaScript ES5標(biāo)準(zhǔn)中新增的Array方法 的相關(guān)資料,需要的朋友可以參考下2016-06-06JS實(shí)現(xiàn)的文字與圖片定時(shí)切換效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)的文字與圖片定時(shí)切換效果代碼,可實(shí)現(xiàn)定時(shí)切換及鼠標(biāo)點(diǎn)擊切換兩種效果,涉及JavaScript鼠標(biāo)事件控制頁(yè)面樣式的相關(guān)技巧,需要的朋友可以參考下2015-10-10微信小程序?qū)崿F(xiàn)紅包功能(后端PHP實(shí)現(xiàn)邏輯)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)紅包功能,以及后端PHP實(shí)現(xiàn)邏輯,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07JavaScript 保護(hù)變量不被隨意修改的實(shí)現(xiàn)代碼
本文通過(guò)實(shí)例代碼給大家分享JavaScript 保護(hù)變量不被隨意修改的實(shí)現(xiàn)方法,需要的朋友參考下吧2017-09-09