首先，對(duì)編碼知識(shí)進(jìn)行簡(jiǎn)要的說明，請(qǐng)務(wù)必理解后再看下面的代碼。發(fā)送中文字符請(qǐng)求時(shí)，如果使用get方式，運(yùn)行正常；而使用post方法則會(huì)出現(xiàn)亂碼。這是由于異步對(duì)象XMLHttpRequest在處理返回的responseText的時(shí)候，是按UTF-8編碼進(jìn)行解碼的。
如果你原來的網(wǎng)頁(yè)編碼是gb2312的話，當(dāng)然會(huì)發(fā)生編碼的沖突了；如果你原來的網(wǎng)頁(yè)編碼是utf-8，那么就不會(huì)出現(xiàn)中文亂碼的問題了。
出現(xiàn)了中文亂碼該怎么辦呢？通常的解決辦法是用escape()對(duì)發(fā)送的數(shù)據(jù)進(jìn)行編碼，然后在返回的responseText上再用unescape()進(jìn)行解碼。然而在JavaScript編程中通常不推薦使用escape()和unescape()，而推薦使用encodeURI()和decodeURI()。請(qǐng)看下面的“表單驗(yàn)證實(shí)例”，或許對(duì)你學(xué)習(xí)編碼知識(shí)有一定的幫助。
第一、jQuery的load(url,[data],[callback])方法
語法說明：url為異步請(qǐng)求的地址，data用來向服務(wù)器傳送請(qǐng)求數(shù)據(jù)，為可選參數(shù)。一旦data參數(shù)啟用，整個(gè)請(qǐng)求過程將以post的方式進(jìn)行，否則默認(rèn)為get方式。如果希望在get方式下也傳遞數(shù)據(jù)，可以在url地址后面用類似“dataname1=data1&dataName2=data2”的方法。
callback為Ajax加載成功后運(yùn)行的回調(diào)函數(shù)。另外使用load()方法返回的數(shù)據(jù)，不再需要考慮是文本還是XML，jQuery都會(huì)自動(dòng)進(jìn)行處理。好了，下面馬上使用load()方法實(shí)現(xiàn)“自動(dòng)表單驗(yàn)證”實(shí)例。首先是，html框架，5個(gè)例子都是一樣的，如下：
1. <form>
2. 用戶昵稱:<input type="text" onblur="startCheck(this)" name="User" id="User"><span id="UserResult"></span><br />
3. 輸入密碼:<input type="password" name="passwd1"><br />
4. 確認(rèn)密碼:</td><td><input type="password" name="passwd2"><br />
5. <input type="submit" value="注冊(cè)" class="button">
6. <input type="reset" value="重置" class="button">
7. </form>
必要說明：
1、onblur="startCheck(this)" 這是JavaScript代碼(簡(jiǎn)稱js) ，意思是text文本框失去焦點(diǎn)時(shí)觸發(fā)自定義函數(shù)startCheck(),this是指代text文本框的值。
2、<span id="UserResult"></span>用來存放異步對(duì)象返回的結(jié)果。
1. jQuery代碼如下：
2.
3. <script language="javascript" src="jquery.min.js"></script>
4. <script language="javascript">
5. function startCheck(oInput){
6. //首先判斷是否有輸入，沒有輸入直接返回，并提示
7. if(!oInput.value){
8. oInput.focus(); //聚焦到用戶名的輸入框
9. document.getElementById("UserResult").innerHTML = "User cannot be empty.";
10. return;
11. }
12. oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法過濾左右空格
13. var sUrl = "action.asp?user=" + oInput;
14. sUrl=encodeURI(sUrl); //使用encodeURI()編碼，解決中文亂碼問題
15. $("#UserResult").load(sUrl,function(data){
16. $("#UserResult").html(decodeURI(data)); //使用decodeURI()解碼
17. }
18. );
19. }
20. </script>
必要說明：
1、使用jQuery時(shí)，都必須加載jquery.min.js文件，可以到http://jquery.com/官網(wǎng)下載最新的版本。
2、判斷是否有輸入時(shí)，用的全是JavaScript語法。
3、對(duì)傳遞給“處理頁(yè)”的參數(shù)進(jìn)行encodeURI編碼，以解決中文亂碼問題。
4、load()中的function函數(shù)是為了對(duì)返回結(jié)果進(jìn)行decodeURI解碼，以解決中文亂碼問題。
5、對(duì)$.trim()、$("#UserResult")、html等jQuery語法不理解的，可以參考jQuery中文手冊(cè)。本站提供下載。
1. action.asp處理頁(yè)代碼如下：
2.
3. <%
4. if(Request("user")="eko") then
5. Response.Write "Sorry, " & Request("user") & " already exists."
6. else
7. Response.Write Request("user")&" is ok."
8. end if
9. %>
必要說明：
1、action.asp處理頁(yè)的編碼是GB2312，如果把"Sorry..already exists..is ik"等英文改為中文，請(qǐng)看下面的說明。
2、使用post方法會(huì)出現(xiàn)亂碼，這是由于異步對(duì)象XMLHttpRequest在處理返回的responseText的時(shí)候，是按UTF-8編碼進(jìn)行解碼的。
3、所以post方式的話，必須把action.asp頁(yè)另存為時(shí)，第三項(xiàng)的編碼由 ANST 改為 UTF-8 (請(qǐng)務(wù)必記住!!)。
第二、使用$.get(url,[data],[callback])和$.post(url,[data],[callback])方法
語法說明：盡管load()方法可以實(shí)現(xiàn)get和post兩種方式，但很多時(shí)候開發(fā)者還是希望能夠指定發(fā)送方式，并且處理服務(wù)器返回的值。jQuery提供了$.get()和$.post()兩種方法，分別針對(duì)這兩種請(qǐng)求方式。
其中，url為請(qǐng)求地址，data為請(qǐng)求數(shù)據(jù)的列表，是可選參數(shù)，callback為請(qǐng)求成功后的回調(diào)函數(shù)，該函數(shù)接受兩個(gè)參數(shù)，第一個(gè)參數(shù)為服務(wù)器返回的數(shù)據(jù)，第二個(gè)參數(shù)為服務(wù)器的狀態(tài)，是可選參數(shù)。$.post()中的type為請(qǐng)求數(shù)據(jù)的類型，可以是html、xml、json等。 “可自動(dòng)校驗(yàn)表單實(shí)例”的jQuery代碼如下，html如上所述。
1. <script language="javascript" src="jquery.min.js"></script>
2. <script language="javascript">
3. function createQueryString(){
4. var username=$("#User").val();
5. //組合成對(duì)象的形式
6. var queryString={user:username};
7. return queryString;
8. }
9. function startCheck(oInput){
10. //首先判斷是否有輸入，沒有輸入直接返回，并提示
11. if(!oInput.value){
12. oInput.focus(); //聚焦到用戶名的輸入框
13. document.getElementById("UserResult").innerHTML = "User cannot be empty.";
14. return;
15. }
16. oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法過濾左右空格
17. $.get("action.asp",createQueryString(),
18. function(data){
19. $("#UserResult").html(data);
20. });
21. }
22. </script>
必要說明：
1、對(duì)$.trim()、$("#UserResult")、html、val()等jQuery語法不理解的，可以參考jQuery中文手冊(cè)。本站提供下載。
2、自定義函數(shù)createQueryString()，是對(duì)傳入“處理頁(yè)”的參數(shù)，進(jìn)行處理。一種常規(guī)的方法。
3、因?yàn)槭且?/span>get方式處理，說明這里不需要進(jìn)行編碼和解碼。下面以post方式處理，則需要編碼和解碼了，代碼如下
1. function createQueryString(){
2. //使用encodeURI()編碼解決中文亂碼問題
3. var username=encodeURI($("#User").val());
4. //組合成對(duì)象的形式
5. var queryString={user:username};
6. return queryString;
7. }
8. function startCheck(oInput){
9. //首先判斷是否有輸入，沒有輸入直接返回，并提示
10. if(!oInput.value){
11. oInput.focus(); //聚焦到用戶名的輸入框
12. document.getElementById("UserResult").innerHTML = "User cannot be empty.";
13. return;
14. }
15. oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法過濾左右空格
16. $.post("action.asp",createQueryString(),
17. function(data){
18. $("#UserResult").html(decodeURI(data));
19. });
20. }
21. </script>
第三、使用$.ajax()方法
語法說明：盡管load()、$.get()和$.post()非常方便實(shí)用，但卻不能控制錯(cuò)誤和很多交互的細(xì)節(jié)，可以說這3種方法對(duì)Ajax的可控性較差。jQuery提供了一個(gè)強(qiáng)大的函數(shù)$.ajax(options)來設(shè)置Ajax訪問服務(wù)器的各個(gè)細(xì)節(jié)，它的語法十分簡(jiǎn)單，就是設(shè)置Ajax的各個(gè)選項(xiàng)，然后指定相應(yīng)的值。“可自動(dòng)校驗(yàn)表單”實(shí)例代碼如下：
1. <script language="javascript" src="jquery.min.js"></script>
2. <script language="javascript">
3. function createQueryString(){
4. //使用encodeURI()編碼解決中文亂碼問題
5. var username=encodeURI($("#User").val());
6. //組合成對(duì)象的形式
7. var queryString={user:username};
8. return queryString;
9. }
10. function startCheck(oInput){
11. //首先判斷是否有輸入，沒有輸入直接返回，并提示
12. if(!oInput.value){
13. oInput.focus(); //聚焦到用戶名的輸入框
14. document.getElementById("UserResult").innerHTML = "User cannot be empty.";
15. return;
16. }
17. oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法過濾左右空格
18. $.ajax({
19. type: "GET",
20. url: "action.asp",
21. data: createQueryString(),
22. success: function(data){
23. $("#UserResult").html(decodeURI(data));
24. }
25. });
26. }
27. </script>
必要說明：
1、代碼基本同上，只是$.ajax(options)稍有不同，對(duì)于其參數(shù)不理解可以參考jQuery中文手冊(cè)。
2、給個(gè)建議，無論是get方式還是post方式，都習(xí)慣進(jìn)行編碼，以防出現(xiàn)中文亂碼的問題。
3、再?gòu)?qiáng)調(diào)一下，無論使用哪種程序，如果遇到問題了，都可以參考相關(guān)的手冊(cè)說明，這是建站所必需的。
上面的實(shí)例使用了jQuery的load()方法、$.get()、$.post()、$.ajax()的4種方法，都要考慮中文亂碼的問題，下面推薦一個(gè)方法，進(jìn)一步簡(jiǎn)化jQuery代碼，呵呵。
第四、表單插件
表單插件（Form Plugin）是一款功能非常強(qiáng)大的插件，在jQuery官方網(wǎng)站上目前為4星級(jí)推薦，下載后為jquery.form.js文件。該插件提供獲取表單數(shù)據(jù)、重置表單項(xiàng)目、使用Ajax提交數(shù)據(jù)等一系列功能，深受開發(fā)人員的喜愛。使用表單插件，再次重寫“表單校驗(yàn)實(shí)例”，完整代碼如下：
1. <form id="myform" action="action.asp">
2. 用戶昵稱:<input type="text" onblur="startCheck(this)" name="User" id="User"><input type="button" value="檢 查" class="button"><span id="UserResult"></span><br />
3. 輸入密碼:<input type="password" name="passwd1"><br />
4. 確認(rèn)密碼:</td><td><input type="password" name="passwd2"><br /><br />
5. <input type="submit" value="注冊(cè)" class="button"><input type="reset" value="重置" class="button">
6. </form>
HTML框架加了一個(gè)“檢查”的按鈕(使用手動(dòng)校驗(yàn)的方法)，jQuery如下：
1. <script language="javascript" src="jquery.min.js"></script>
2. <script language="javascript" src="jquery.form.js"></script>
3. <script language="javascript">
4. function startCheck(oInput){
5. //首先判斷是否有輸入，沒有輸入直接返回，并提示
6. if(!oInput.value){
7. oInput.focus(); //聚焦到用戶名的輸入框
8. document.getElementById("UserResult").innerHTML = "User cannot be empty.";
9. return;
10. }
11. }
12. $(function(){
13. $("input[type=button]").click(function(){
14. var options={
15. target: "#UserResult"
16. };
17. //表單的Ajax化
18. $("#myform").ajaxSubmit(options);
19. });
20. });
21. </script>
必要說明：
1、使用表單插件，必須加載jquery.form.js文件。
2、按Ajax方式提交數(shù)據(jù)，可以使用表單插件的ajaxSubmit(options)來按照Ajax的方式直接提交表單或者使用ajaxform(options)方法，通常在頁(yè)面加載完成時(shí)執(zhí)行，用來將表單統(tǒng)一Ajax化，并且提交表單依然使用傳統(tǒng)的submit按鈕，只不過進(jìn)行的是Ajax提交。其中參數(shù)options與$.ajax(options)的參數(shù)基本相同。
您正在看的文章來自瘋狂軟件教育中心 www.fkjava.org
信息咨詢：Q564205990 星老師