JSON+AJAX

1、在HTML中，有這樣一個表單：

<form method="post" name="searchform" id="searchform" method="/sek.go">
<input name="query" value="" type="text" id="query" />
<input type=”submit” value="查詢"></input>
</form>

 

當然，要想在HTML中使用Js功能，必須在<head/>中加入

<script type="text/javascript"src="/style/js/ajax.js"></script>

 

2、然後在ajax.js文件中加入如下代碼

function userSearch(){

var query = $("#searchform input[@name='query']").val();


$.post("/userSearch.htm", { query: query } ,function callback(json){

var userlist = $.parseJSON(json);

userList(userlist);

});

}

解釋如下：

1)、"#searchform input[@name='query']"；的意思是： 選擇id爲searchform其下的(name屬性值爲’query’的)input標籤

2)、$(“”).val()意爲要得到(“”)所選中屬性的值；

3)、在$.post()中，第一項參數是指定目標servlet，即要把本post請求發給的那個servlet。

第二項是本post請求所攜帶的數據；“:”前的爲key或者name，後爲value；

第三項是回調函數，其內若有形參，則表示要對從servlet返回的值進行處理，這裏的callback的功能是將JSON對象json轉換成了JS對象userlist，然後將JS對象傳入函數userList

3、post請求攜帶了名爲query的參數去了後臺，在servlet中進行處理：

//從名爲"query"能的參數中取出post帶過來的數據
String query = request.getParameter("query");
if (query != null && !query.isEmpty()
&& !query.trim().equalsIgnoreCase("")) {
//如果"query"的值不爲空，就用'query'爲參數構建HQL語句
String hql = "from TUser as user where user.userName like '"+ query + "%'";
//到庫表TUser中進行查詢，並得到一個表結構
List list = weilav3TUserDAO.getListByHQL(hql);
if (list != null && !list.isEmpty()) {
//若list不爲空，則將其轉換成JSON對象，並存入jsonArray中
JSONArray jsonArray = JSONArray.fromObject(list);
//下面就是把存有查詢結果的JSON對象返給頁面
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(jsonArray);
……
}else {……}