<%@ 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>
struts2 + jquery + json 登录、发送消息例子( jsp页面) - 4
最新推荐文章于 2024-10-06 17:19:15 发布