1 ajax:Asynchronous JavaScript and XML
异步javascript和xml,作用:允许浏览器与服务器通信而无须刷新当前页面的技术,即局部刷新
2json: JavaScript Object Notation
即javascript对象格式,用于服务端向网页传递数据
3开发action(struts中有2种：没有返回值和返回null)
public String show() throws IOException{
List<User>list = db.list();
HttpServletRequest request = ServletActionContext.getRequest();//创建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();//创建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));
}
页面开发
<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);//转发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>
网友评论