現在，我們要改用jQuery來實現；在用過jQuery之後，會發現在AJAX的運作上，它比JavaScript更為簡潔有力。
再來，既然要呈現，就要搭配一個Web Server，所以我要用的是Embedded Linux上常用的一款網頁伺服器─boa
可以直接看前後端的程式碼：jQueryAjax_boa.html
<!DOCUMENT HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.prg/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQueryAjax.html</title>
<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
<script language="JavaScript" type="text/javascript">
var g_strUri = function() {
var strTemp = window.location.protocol + "//" + window.location.host;
if (window.location.port)
strTemp += ":" + window.location.port;
return strTemp;
};
</script>
</head>
<body>
<center>
<form action="" method="" id="jQueryAjax">
<h2>Hello, AJAX!!</h2><hr width="30%">
<table width="30%" border="0">
<tr>
<td align="right">Username:</td>
<td align="left">
<input type="text" name="nmUsername">
</td>
</tr>
<tr>
<td align="right">Password:</td>
<td align="left">
<input type="password" name="nmPassword">
</td>
</tr>
<tr><td colspan="2">
<center><br/>
<input type="button" value="POST" id="AjaxTest"/>
</center>
</td></tr>
</table>
<center><br/>
<div id="ajax-ServerBack"></div>
</center>
</form>
</center>
</body>
<script language="JavaScript" type="text/javascript">
(function($) {
$(window.document).ready(function() {
$("#AjaxTest").click(function() {
$.ajax({
url: g_strUri() + "/boafrm/formAjaxTesting",
type: "POST",
data: $("#jQueryAjax").serialize(),
dataType: "text",
cache: true,
//context: ,
timeout: 10000,
global: true,
contentType: "application/x-www-form-urlencoded",
success: function(msg) {
document.getElementById("ajax-ServerBack").innerHTML = msg;
return true;
},
error: function(xhr, ajaxOptions, thrownError) {
/*alert("xhr.status: " + xhr.status + "\n" +
"ajaxOptions: " + ajaxOptions + "\n" +
"thrownError: " + thrownError + "\n");
*/alert(" An error has occured making the request");
return false;
},
/*
complete: function(xhr, status) {
//alert("The XMLHTTPRequest Send Complete!! ");
return;
},
beforeSend: function(xhr) {
alert("The XMLHTTPRequest will be Send!! ");
return;
},
*/
async: true,
processData: true,
//dataFilter: function() { return; },
ifModified: false,
//jsonp: ,
//username: "admin",
//password: "admin",
scriptCharset: "utf-8",
//xhr: function() { return; },
traditional: true
});
return;
});
return;
});
})(jQuery);
</script>
</html>
應該不會很難懂吧!! 像有一些暫時用不太到，或是自己還不清楚該怎麼用的，就先暫時把它們註解掉；講一個簡單一點的，data: $("#jQueryAjax").serialize(), 就是把id為jQueryAjax的Form表單資料序列化，這裡的序列化，就是把表單的資料直接變成：nmUsername=PabloPicasso.G&nmPassword=0123456789。這比JavaScript用字串來串接方便多了!!假如不是很清楚$.ajax()的一些參數設定，這個網站─jQuery ajax - ajax() 方法有非常詳細地介紹，可以參考一下!!
最後，再附上boa Server端的程式碼：/ boa / src / fmajax.c
void formAjaxTesting(request *wp, char *path, char *query)
{
char *strVal = NULL;
strVal = req_get_cstream_var(wp, ("nmUsername"), "");
printf("0. %s (%d): %s \n", __FUNCTION__, __LINE__, strVal);
strVal = req_get_cstream_var(wp, ("nmPassword"), "");
printf("1. %s (%d): %s \n", __FUNCTION__, __LINE__, strVal);
strVal = req_get_cstream_var(wp, ("submit-url"), "");
printf("2. %s (%d): %s \n", __FUNCTION__, __LINE__, strVal);
req_format_write(wp, ("Hello!! AJAX by jQuery!! "), "");
return;
}
printf()是用來在RS-232下Debug用的，可以確認自己所輸入的資料，有確實地跑到後端。
沒有留言:
張貼留言