【AJAX】用JQuery寫法POST方式傳遞
之前用AJAX都是以傳統方式寫法，傳遞方式都是以GET方式為主，然而要將整張表單資訊傳遞，用POST方式顯然比較恰當。
不過在POST方式當中，值得留意的是中文字容易產生亂碼問題，最好頁面統一採用UTF-8格式，萬一不幸網頁或DB是採用Big5的話，那就要將接受參數的網頁設成UTF-8格式，以ASP來說可以寫成Session.CodePage=65001。
以下是簡單範例測試
【ajax_test.html】 是big5格式
JavaScript：
<!-- 引用Jquery 必要條件-->
<script type="text/javascript" src="/menu/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
var Submit=function(){
var URLs="ajax_test.asp"; //傳遞處理頁面
//alert(decodeURIComponent($('#sentToBack').serialize()));
// 上面alert debug用途 【註一】
$.ajax({
url: URLs,
data: $('#sentToBack').serialize(), //Form ID
type:"POST",
dataType:'text',
//成功處理
success: function(msg){
alert(msg);
},
//錯誤處理
error:function(xhr, ajaxOptions, thrownError){
alert(xhr.status);
alert(thrownError);
}
});
}
</script>
部分HTML：
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
.... 省略之 .....
<form id="sentToBack">
<p>姓名: <input name="cname" type="text" size="10"/></p>
<p>住址: <input name="addr" type="text" size="20"/></p>
<p>
性別:
<input name="gender" type="radio" value="男" />
男
<input name="gender" type="radio" value="女" />
女
</p>
<p>職業:
<select name="work">
<option value="學生">學生</option>
<option value="工程師">工程師</option>
<option value="老師">老師</option>
</select>
</p>
<input type="button" id="button_query" value="查詢" onclick="Submit();">
</form>
【ajax_test.asp】是ANSI編碼
ASP部分：
<!-- 引用檔案是ANSI編碼，big5格式；DB定義也是big5-->
<!--#include virtual="/db/public_include_db.asp"-->
<%
'定義utf-8格式
Session.CodePage=65001
show="姓名:" & request("cname") & vbcrlf & _
"住址:" & request("addr") & vbcrlf & _
"性別:" & request("gender") & vbcrlf & _
"職業:" & request("work") & vbcrlf
v_sql = "SELECT top 5 Note FROM System_Bulletin "
set rs=Exec_Record(v_sql)
if not rs.eof then
note=rs("Note")
end if
rs.close : set rs = nothing
response.write show & note
%>
執行畫面：
【註一】：$('#sentToBack').serialize() 預設會將資料編碼，採用encodeURIComponent(string)函數， 若要看原始資料的話，可用decodeURIComponent(string)函數反編碼。
參考資源：
AJAX在非UTF-8傳送中文資料注意事項筆記
留言
張貼留言