1 ajax:Asynchronous JavaScript and XML
異步j(luò)avascript和xml,作用:允許瀏覽器與服務(wù)器通信而無須刷新當(dāng)前頁面的技術(shù),即局部刷新
2json: JavaScript Object Notation
即javascript對象格式,用于服務(wù)端向網(wǎng)頁傳遞數(shù)據(jù)
3開發(fā)action(struts中有2種：沒有返回值和返回null)
public String show() throws IOException{
List<User>list = db.list();
HttpServletRequest request = ServletActionContext.getRequest();//創(chuàng)建request對象
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
JSONArray ja=new JSONArray();
out.println(ja.fromObject(list));
return null;
} 或
public void show() throws IOException{
List<User>list = db.list();
HttpServletRequest request = ServletActionContext.getRequest();//創(chuàng)建request對象
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
JSONArray ja=new JSONArray();
out.println(ja.fromObject(list));
}
頁面開發(fā)
<script type="text/javascript">
$(function() {
$("#showtab").hide();//表隱藏
$("#btn1").click(//單擊登錄 按鈕
function() {
if ($("#name").val().trim() == "") {$("#qq").html("<font color='red'>姓名不能為空</font>");}
else if($("#pwd").val().trim() == "") {$("#qq").html("");//清空$("#qq").html("<font color="red">密碼不能為空</font>");}
else{$("#qq").html("");//清空
$.post("per_login", $("#kk").serialize(),function(msg) {
if (msg == 0) {
$("#qq").html("<font color="red">非法用戶名或密碼！！</font>");}
else{$("#showtab").show();//表顯示
$("#qq").html("");//清空!!
var aa=eval(msg);//轉(zhuǎn)發(fā)js可識別的json格式
for (i = 0; i<aa.length; i++) {$("#show").append("<tr><td>"+aa[i].id+"</td><td>"+aa[i].name+"</td><td>"+aa[i].pwd+"</td></tr>")} } }); } }); });
</script>
</head>
<body>
<center><form action="" method="post" id="kk">
姓名：<input type="text" name="name"? id="name"><br>
密碼：<input?type="password" name="pwd" id="pwd"><br>
<input type="button" value="登錄" id="btn1"><input type="button"?value="注冊" id="btn2">
<div id="qq"></div></form>
<table id="showtab" border="1" width="500">
<tr><td>序列</td><td>姓名</td><td>密碼</td></tr>
<tbody id="show"></tbody></table>
