動態(tài)生成的DOM不會觸發(fā)onclick事件的原因及解決方法
637
2024-02-22
本文實例講述了jQuery+json實現(xiàn)的簡易Ajax調(diào)用。分享給大家供大家參考，具體如下：
Userservlet.java代碼：
package com.iss.servlet;
import org.json.JSONException;
import org.json.JSONObject;
import com.iss.pojo.User;
import com.iss.util.JSONUtil;
public class UserServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
//list 添加對象
List<User> userList = new ArrayList<User>();
User user1 = new User("張三", "男", "18");
User user2 = new User("李四", "男", "19");
User user3 = new User("王五", "男", "20");
userList.add(user1);
userList.add(user2);
userList.add(user3);
PrintWriter out = response.getWriter();
String str = null;
try {
//帳號密碼如果匹配則把list 返回給界面
if (request.getParameter("userName").equals("jquery")
&& request.getParameter("password").equals("ajax")) {
str = JSONObject.quote(JSONUtil.toJSONString(userList));
}
out.print(str);
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
System.out.println("str "+str);
out.flush();
out.close();
}
}
Html代碼：
<body>
帳號 jquery 密碼 ajax
<form id="mainform">
<ul>
<li>
帳號
<input type="text" name="userName" />
</li>
<li>
密碼
<input type="password" name="password" />
</li>
<li>
<input onclick="login()" type="button" value="登錄" />
</li>
</ul>
</form>
查詢到的數(shù)據(jù)
<div id="diva">
</div>
<script type="text/javascript">
function login(){
//獲取form的參數(shù)
var args =$("#mainform").serialize();
//調(diào)用 jquery 的json獲取方法
//三個參數(shù)分別為 ：請求路徑 ，請求參數(shù)，返回數(shù)據(jù)的回調(diào)函數(shù)
$.getJSON("servlet/UserServlet",args,function (data){
if(data!=null){
// 界面返回的是一個json格式字符串 調(diào)用JSON.parse()把數(shù)據(jù)轉(zhuǎn)化為json
// 格式的對象
var jsondata =JSON.parse(data);
parseData(jsondata);
}else{
alert("帳號密碼輸入有誤");
}
})
}
function parseData(data){
var str="";
//遍歷json格式數(shù)據(jù)
for (var key in data){
strstr =str+" 用戶"+data[key].userName+" 年齡"+data[key].age+"<br/>"
alert(str);
}
//把數(shù)據(jù)添加到div中
$("#diva").html(str);
}
</script>
</body>
UserServlet 記得要導(dǎo)入 工具類 JSONStringObject JSONUtil
jsp 要導(dǎo)入 jquery.js和 json.js
希望本文所述對大家jQuery程序設(shè)計有所幫助。
