日期:2014-05-16  浏览次数:20342 次

struts2 + jquery + json 登录、发送消息例子( jsp页面) - 4

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
?<head>
??<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
??<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
??<script type="text/javascript">
??$(document).ready( function() {
??//使用 Ajax 的方式 判断登录
??$("#btn_login").click( function() {
???var url = 'loginAction.action';
???//获取表单值,并以json的数据形式保存到params中
???var params = {
????username:$("#username").val(),
????password:$("#password").val()
???}
???//使用$.post方式?
???$.post(
????url,??//服务器要接受的url
????params,??//传递的参数??
????function cbf(data){?//服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
?????//alert(data);
?????var member = eval("("+data+")");?//包数据解析为json 格式?
?????$('#result').html("欢迎您:? "+member.username+"<br>您的密码是:"+member.password);
????},
????? 'json'?//数据传递的类型? json
???);
??});
?});
</script>
<title>jquery 登录</title>
?</head>
?<body>
??<center>
??<table>
??<tr>
??<td>
??<span>用户名:</span>
??</td>
??<td>
??<input type="text" id="username" name="model.username">
??</td>
??</tr>
??<tr>
??<td>
??<span>密码:</span>
??</td>
??<td>
??<input type="password" name="model.password" id="password">
??</td>
??</tr>
??<tr>
??<td colspan="2">
??<input type="button" id="btn_login" value="Login" />
??</td>
??</tr>
??</table>
??<p>
???这里显示ajax信息:
???<br />
???<span id="result"></span>
??</p>
??<p>
???<a href="message.jsp">发送消息</a>
??</p>
??</center>
?</body>
</html>