聊聊Ajax提交form表單的看法和認(rèn)識(shí)
ajax (ajax開發(fā))
AJAX即“Asynchronous Javascript And XML”(異步JavaScript和XML),是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開發(fā)技術(shù)。
AJAX = 異步 JavaScript和XML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集)。
AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。
通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下,對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
學(xué)代碼的時(shí)間也不短了,但是卻很少使用ajax,后來(lái)特地去了解了一下,以下是作為初用ajax的新人對(duì)ajax的看法以及認(rèn)識(shí)。
Ajax,異步請(qǐng)求,通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下,對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
最近自己測(cè)試ajax提交form表單,表單提交有post和get兩種使用更多的是post方法,雖然與 POST 相比,GET 更簡(jiǎn)單也更快,并且在大部分情況下都能用。
然而,在以下幾種情況中,使用 POST 請(qǐng)求更為有效:
1.無(wú)法使用緩存文件(更新服務(wù)器上的文件或數(shù)據(jù)庫(kù))
2.向服務(wù)器發(fā)送大量數(shù)據(jù)(POST 沒(méi)有數(shù)據(jù)量限制)
3.發(fā)送包含未知字符的用戶輸入時(shí),POST 比 GET 更穩(wěn)定也更可靠
$get方式提交表單
get() 方法通過(guò)遠(yuǎn)程 HTTP GET 請(qǐng)求載入信息
格式
$(selector).get(url,data,success(response,status,xhr),dataType)
比如:
請(qǐng)求 demo.php 網(wǎng)頁(yè),傳送2個(gè)參數(shù),忽略返回值:
$.get("demo.php", { name: "John", time: "2pm" } );
demo.php 是發(fā)送請(qǐng)求的URL地址
{ name: “John”, time: “2pm” } 要發(fā)送給服務(wù)器的數(shù)據(jù).
$POST方式提交表單
$.post
jQuery.post( url, [data], [callback], [type] ) :使用POST方式來(lái)進(jìn)行異步請(qǐng)求
參數(shù):
url (String) : 發(fā)送請(qǐng)求的URL地址.
data (Map) : (可選) 要發(fā)送給服務(wù)器的數(shù)據(jù),以 Key/value 的鍵值對(duì)形式表示。
callback (Function) : (可選) 載入成功時(shí)回調(diào)函數(shù)(只有當(dāng)Response的返回狀態(tài)是success才是調(diào)用該方法)。
比如,注冊(cè)時(shí),驗(yàn)證碼的使用
<script type="text/javascript"> function redirect(url) { location.href = url; } $("#code_btn").click(function(){ var tel = $("#username").val(); if(tel == ""){ alert("請(qǐng)輸入正確的手機(jī)號(hào)碼作為賬號(hào)進(jìn)行注冊(cè)"); $("#username").focus(); return false; } if(!(/^1[3|4|5|8|7][0-9]\d{4,8}$/.test(tel))){ alert("請(qǐng)使用正確的手機(jī)號(hào)碼作為賬號(hào)進(jìn)行注冊(cè)!"); $("#username").focus(); return false; }; var codeNum = $("#code").val(); $.post( '{APP_PATH}index.php?m=member&c=index&a=public_send_message', {tel:tel,codeNum:codeNum}, function(result){ // console.log(result); }) timep(60); }); function timep(j){ $("#code_btn").attr('disabled',"true"); $("#code_btn").val(j+"秒"); time=setInterval(function(){ j=j-1; $("#code_btn").val(j+"秒"); if(j==0){ $("#code_btn").removeAttr('disabled'); clearInterval(time); j=60; $("#code_btn").val("點(diǎn)擊獲取驗(yàn)證碼"); } },1000); } </script>
APP_PATH}index.php?m=member&c=index&a=public_send_message 是發(fā)送請(qǐng)求的URL地址
{tel:tel,codeNum:codeNum} 是要發(fā)送給服務(wù)器的數(shù)據(jù),以 Key/value 的鍵值對(duì)形式表示。
以上所述是小編給大家介紹的Ajax提交form表單的看法和認(rèn)識(shí),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- jQuery實(shí)現(xiàn)form表單基于ajax無(wú)刷新提交方法詳解
- jquery validate和jquery form 插件組合實(shí)現(xiàn)驗(yàn)證表單后AJAX提交
- Jquery基于Ajax方法自定義無(wú)刷新提交表單Form實(shí)例
- jquery序列化form表單使用ajax提交后處理返回的json數(shù)據(jù)
- jquery實(shí)現(xiàn)ajax提交form表單的方法總結(jié)
- Jquery通過(guò)Ajax方式來(lái)提交Form表單的具體實(shí)現(xiàn)
- ajax XMLHTTP Post Form時(shí)的表單亂碼綜合解決
相關(guān)文章
AJAX原理以及axios、fetch區(qū)別實(shí)例詳解
前端是個(gè)發(fā)展迅速的領(lǐng)域,前端請(qǐng)求自然也發(fā)展迅速,從原生的XHR到j(luò)query ajax,再到現(xiàn)在的axios和fetch,下面這篇文章主要給大家介紹了關(guān)于AJAX原理以及axios、fetch區(qū)別的相關(guān)資料,需要的朋友可以參考下2022-04-04如何通過(guò)axios發(fā)起Ajax請(qǐng)求(最新推薦)
Axios是專注于網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的庫(kù),相比于原生的XMLHttpRequest對(duì)象,axios簡(jiǎn)單易用。相比于Jquery,axios更加輕量化,只專注于網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求,這篇文章主要介紹了如何通過(guò)axios發(fā)起Ajax請(qǐng)求,需要的朋友可以參考下2022-11-11ajax實(shí)現(xiàn)用戶名校驗(yàn)的傳統(tǒng)和jquery的$.post方式(實(shí)例講解)
下面小編就為大家分享一篇ajax實(shí)現(xiàn)用戶名校驗(yàn)的傳統(tǒng)和jquery的$.post方式的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助2017-12-12如何實(shí)現(xiàn)ajax延時(shí)發(fā)送在空閑之后去發(fā)送ajax請(qǐng)求
關(guān)鍵字搜索的功能,還是比較實(shí)用的,在實(shí)現(xiàn)過(guò)程中就需用到ajax延時(shí)發(fā)送,下面有個(gè)不錯(cuò)的示例,有需要的朋友可以參考下2013-12-12通過(guò)抓取淘寶評(píng)論為例講解Python爬取ajax動(dòng)態(tài)生成的數(shù)據(jù)(經(jīng)典)
在學(xué)習(xí)python的時(shí)候,一定會(huì)遇到網(wǎng)站內(nèi)容是通過(guò) ajax動(dòng)態(tài)請(qǐng)求、異步刷新生成的json數(shù)據(jù) 的情況,并且通過(guò)python使用之前爬取靜態(tài)網(wǎng)頁(yè)內(nèi)容的方式是不可以實(shí)現(xiàn)的,所以這篇文章將要講述如果在python中爬取ajax動(dòng)態(tài)生成的數(shù)據(jù)。2015-10-10使用$.get()根據(jù)選項(xiàng)的不同從數(shù)據(jù)庫(kù)異步請(qǐng)求數(shù)據(jù)
本例實(shí)現(xiàn)的是這樣的一個(gè)效果:當(dāng)從select下拉框選擇編程語(yǔ)言時(shí)時(shí),根據(jù)選項(xiàng)的不同,異步請(qǐng)求不同的函數(shù)API描述,需要的朋友可以參考下2014-04-04簡(jiǎn)單實(shí)現(xiàn)Ajax無(wú)刷新分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了簡(jiǎn)單實(shí)現(xiàn)Ajax無(wú)刷新分頁(yè)效果的代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05空格或者空白字符導(dǎo)致$.ajax()報(bào)parseerror錯(cuò)誤小結(jié)
這篇文章主要介紹了空格或者空白字符導(dǎo)致$.ajax()報(bào)parseerror錯(cuò)誤,需要的朋友可以參考下2014-04-04