运用Ajax和JSON对象实现JSP和Servlet的数据传递
2016-03-09 22:54
731 查看
一、JSP代码
1、 函数部分
<script type="text/javascript">
var xmlHttp;
//自定义一个方法，代替document.getElementById()
function $(id) {
return document.getElementById(id);
}
//建立XMLHttpRequest对象
function createXmlHttpRequest() {
alert("createXmlHttpRequest方法已经运行");
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
return new XMLHttpRequest();
}
}
//ajax中Post方法提交数据
function loadUser() {
alert("loadUser方法已经运行");
xmlHttp = createXmlHttpRequest();
xmlHttp.open("post", "InfoServlet", true);
xmlHttp.setRequestHeader("content-type",
"application/x-www-form-urlencoded");
//设置回调函数
xmlHttp.onreadystatechange = userCallBack;
var userName = $("data").value;
var param = "userName=" + encodeURIComponent(userName) + "&act="
+ "loadUser";
xmlHttp.send(param);
}
//回调函数
function userCallBack() {
alert("userCallBack方法已经运行");
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
alert("状态正常");
//将JSON字符串转成JSON对象，再将JSON对象转成Java对象
//var json=new JSONObject().fromObject(xmlHttp.responseText);
//var user=JSONObject.toBean(json,User.class);
//alert(user.toString());
alert(xmlHttp.responseText);
//服务器端返回字符串类型，转成JSON对象
var user = eval('('+xmlHttp.responseText+')');
//获取数据
var password = user.password;
var email = user.email;
var introduce = user.introduce;
var photo = user.photo;
var tel = user.tel;
$("password").value = password;
$("repassword").value = password;
$("email").value = email;
$("introduce").value = introduce;
$("photo").value = photo;
$("tel").value = tel;
}
}
}
//验证表单
function check(input) {
var content = input.value;//获取输入值
var id = "msg_" + input.id;
var msg = document.getElementById(id);
var regexp = null;
if (content == "") {
msg.innerHTML = "<img src='image/false.gif'/>不能为空";
return false;
} else {
if (input.id == "password") {
regexp = /[a-z][A-Z][0-9]/;
var result = content.match(regexp);
if (content.match(".{6,16}") != content) {
msg.innerHTML = "<img src='image/false.gif'/>密码必须是6到16位";
return false;
} else {
msg.innerHTML = "<img src='image/right.gif'/>";
}
} else if (input.id == "repassword") {
var password = document.getElementById("password");
if (input.value != password.value) {
msg.innerHTML = "<img src='image/false.gif'/>密码确认和密码不一致";
return false;
} else {
msg.innerHTML = "<img src='image/right.gif'/>";
}
} else if (input.id == "tel") {
if (content.match("\\d{11}") != content) {
msg.innerHTML = "<img src='image/false.gif'/>手机号码格式不正确";
return false;
} else {
msg.innerHTML = "<img src='image/right.gif'/>";
}
} else {
msg.innerHTML = "<img src='image/right.gif'/>";
}
}
}
</script>
2、表单
<body onload="loadUser()">
<!-- 通过url来传递数据 -->
<form action="InfoServlet" method="post">
<table>
<tr>
<th>账号</th>
<td>${sessionScope.user }<span style="color: red;"
id="msg_userName"></span>
</td>
</tr>
<tr>
<th>密码</th>
c2a3
<td><input type="password" name="password" id="password"
onclick="loadUser()" onblur="check(this)"> <span
style="color: red;" id="msg_password"><img
src="image/require.gif" />密码6-16位，必须包含字母数字</span></td>
<tr>
<th>密码确认</th>
<td><input type="repassword" name="repassword"
id="repassword" onblur="check(this)" /> <span style="color: red;"
id="msg_repassword"><img src="image/require.gif" /></span></td>
</tr>
<tr>
<th>邮箱</th>
<td><input type="text" name="email" id="email"
onblur="check(this)" /> <span style="color: red;" id="msg_email"><img
src="image/require.gif" /></span></td>
</tr>
<tr>
<th>个人简介</th>
<td><textarea id="introduce" cols="18" rows="3"
onblur="check(this)"></textarea> <span style="color: red;"
id="msg_introduce"><img src="image/require.gif" /></span></td>
</tr>
<tr>
<th>头像</th>
<td><input type="text" name="photo" id="photo"
onblur="check(this)" /> <span style="color: red;" id="msg_photo"><img
src="image/require.gif" /></span></td>
</tr>
<tr>
<th>联系电话</th>
<td><input type="text" name="tel" id="tel"
onblur="check(this)" onclick="hello()" /> <span
style="color: red;" id="msg_tel"><img
src="image/require.gif" />必须是11位</span></td>
</tr>
</table>
<input type="hidden" id="data" value="${sessionScope.user }" style="display:none"/>
<input type="reset" value="重置" /><input type="submit" value="提交" />
</form>
</body>
二、Servlet部分
public class InfoServlet extends HttpServlet {
User user=new User();
UserBiz userBiz=new UserBiz();
/*请求处理*/
public void service(HttpServletRequest request,HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
String act=request.getParameter("act");
System.out.println("service方法正在运行");
System.out.println(act);
if("loadUser".equals(act)) {
this.loadUser(request,response);
}
}
/*加载指定员工的信息*/
public void loadUser(HttpServletRequest request,HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
System.out.println("loadUser()方法正在执行");
//获取从客户端发送的数据
HttpSession session=request.getSession();
//String userName=request.getParameter("userName");
String userName=(String)session.getAttribute("user");
System.out.println(userName);
user=userBiz.getByUserName(userName);
System.out.println(user.toString());
/*调用JSON的库将Java对象转成JSON对象*/
//JSONObject json=JSONObject.fromObject(obj);
/*将JSON对象转成字符串*/
//String str=json.toString
/*将Java对象转成JSON对象，然后转成字符串*/
out.print(JSONObject.fromObject(user));
//在控制台输出结果
System.out.println(JSONObject.fromObject(user));
out.flush();
out.close();
}
}
写完这段代码以后，还得在web.xml中配置Servlet
三、小结
在本次试验中，使用了JSON对象，所以一定要引"Java JSON 包"。本例中通过Ajax请求和接收数据的过程中遇到了很多问题，大多是
语法错误，如下所示：
（1）JSP变量声明方式不当
例如：String password=user.password;
按照JavaScript中声明变量的方法，正确的写法是：var password=user.password.
（2）Ajax中通过param传递多个参数，param出现语法错误
例如：var param="userName="+encodeURIComponent(userName)+"act="+encodeURIComponent("loadUser");
这样的写法是错误的，Ajax中通过param传递多个参数，param的正确写法是：var param="userName"+
encodeURIComponent(userName)+"&act=loaderUser";
（3）混淆了通过JSON传递对象和列表的使用方法
通过JSON对象传递单个对象和列表数据时，发送端和接收端的写法略有不同，如果是列表写法如下：
发送端（Servlet）：out.print(JSONArray.fromObject(users));//其中users是List类型的列表，这个方法的作用是将List对象
转成JSON对象。
接收端(JSP)：var users=eval(xmlHttp.responseText);//服务器端返回字符串类型，转成JSON对象。其中xmlHttp是XMLHttpRequest对象
但如果是传递单个对象的话，写法如下：
发送端（Servlet）：out.print(JSONObject.fromObject(user));//注意是JSONObject类，user是单个对象
接收端（JSP）：var user=eval('('+xmlHttp.responseText+')');//注意两个括号不能省
1、 函数部分
<script type="text/javascript">
var xmlHttp;
//自定义一个方法，代替document.getElementById()
function $(id) {
return document.getElementById(id);
}
//建立XMLHttpRequest对象
function createXmlHttpRequest() {
alert("createXmlHttpRequest方法已经运行");
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
return new XMLHttpRequest();
}
}
//ajax中Post方法提交数据
function loadUser() {
alert("loadUser方法已经运行");
xmlHttp = createXmlHttpRequest();
xmlHttp.open("post", "InfoServlet", true);
xmlHttp.setRequestHeader("content-type",
"application/x-www-form-urlencoded");
//设置回调函数
xmlHttp.onreadystatechange = userCallBack;
var userName = $("data").value;
var param = "userName=" + encodeURIComponent(userName) + "&act="
+ "loadUser";
xmlHttp.send(param);
}
//回调函数
function userCallBack() {
alert("userCallBack方法已经运行");
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
alert("状态正常");
//将JSON字符串转成JSON对象，再将JSON对象转成Java对象
//var json=new JSONObject().fromObject(xmlHttp.responseText);
//var user=JSONObject.toBean(json,User.class);
//alert(user.toString());
alert(xmlHttp.responseText);
//服务器端返回字符串类型，转成JSON对象
var user = eval('('+xmlHttp.responseText+')');
//获取数据
var password = user.password;
var email = user.email;
var introduce = user.introduce;
var photo = user.photo;
var tel = user.tel;
$("password").value = password;
$("repassword").value = password;
$("email").value = email;
$("introduce").value = introduce;
$("photo").value = photo;
$("tel").value = tel;
}
}
}
//验证表单
function check(input) {
var content = input.value;//获取输入值
var id = "msg_" + input.id;
var msg = document.getElementById(id);
var regexp = null;
if (content == "") {
msg.innerHTML = "<img src='image/false.gif'/>不能为空";
return false;
} else {
if (input.id == "password") {
regexp = /[a-z][A-Z][0-9]/;
var result = content.match(regexp);
if (content.match(".{6,16}") != content) {
msg.innerHTML = "<img src='image/false.gif'/>密码必须是6到16位";
return false;
} else {
msg.innerHTML = "<img src='image/right.gif'/>";
}
} else if (input.id == "repassword") {
var password = document.getElementById("password");
if (input.value != password.value) {
msg.innerHTML = "<img src='image/false.gif'/>密码确认和密码不一致";
return false;
} else {
msg.innerHTML = "<img src='image/right.gif'/>";
}
} else if (input.id == "tel") {
if (content.match("\\d{11}") != content) {
msg.innerHTML = "<img src='image/false.gif'/>手机号码格式不正确";
return false;
} else {
msg.innerHTML = "<img src='image/right.gif'/>";
}
} else {
msg.innerHTML = "<img src='image/right.gif'/>";
}
}
}
</script>
2、表单
<body onload="loadUser()">
<!-- 通过url来传递数据 -->
<form action="InfoServlet" method="post">
<table>
<tr>
<th>账号</th>
<td>${sessionScope.user }<span style="color: red;"
id="msg_userName"></span>
</td>
</tr>
<tr>
<th>密码</th>
c2a3
<td><input type="password" name="password" id="password"
onclick="loadUser()" onblur="check(this)"> <span
style="color: red;" id="msg_password"><img
src="image/require.gif" />密码6-16位，必须包含字母数字</span></td>
<tr>
<th>密码确认</th>
<td><input type="repassword" name="repassword"
id="repassword" onblur="check(this)" /> <span style="color: red;"
id="msg_repassword"><img src="image/require.gif" /></span></td>
</tr>
<tr>
<th>邮箱</th>
<td><input type="text" name="email" id="email"
onblur="check(this)" /> <span style="color: red;" id="msg_email"><img
src="image/require.gif" /></span></td>
</tr>
<tr>
<th>个人简介</th>
<td><textarea id="introduce" cols="18" rows="3"
onblur="check(this)"></textarea> <span style="color: red;"
id="msg_introduce"><img src="image/require.gif" /></span></td>
</tr>
<tr>
<th>头像</th>
<td><input type="text" name="photo" id="photo"
onblur="check(this)" /> <span style="color: red;" id="msg_photo"><img
src="image/require.gif" /></span></td>
</tr>
<tr>
<th>联系电话</th>
<td><input type="text" name="tel" id="tel"
onblur="check(this)" onclick="hello()" /> <span
style="color: red;" id="msg_tel"><img
src="image/require.gif" />必须是11位</span></td>
</tr>
</table>
<input type="hidden" id="data" value="${sessionScope.user }" style="display:none"/>
<input type="reset" value="重置" /><input type="submit" value="提交" />
</form>
</body>
二、Servlet部分
public class InfoServlet extends HttpServlet {
User user=new User();
UserBiz userBiz=new UserBiz();
/*请求处理*/
public void service(HttpServletRequest request,HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
String act=request.getParameter("act");
System.out.println("service方法正在运行");
System.out.println(act);
if("loadUser".equals(act)) {
this.loadUser(request,response);
}
}
/*加载指定员工的信息*/
public void loadUser(HttpServletRequest request,HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
System.out.println("loadUser()方法正在执行");
//获取从客户端发送的数据
HttpSession session=request.getSession();
//String userName=request.getParameter("userName");
String userName=(String)session.getAttribute("user");
System.out.println(userName);
user=userBiz.getByUserName(userName);
System.out.println(user.toString());
/*调用JSON的库将Java对象转成JSON对象*/
//JSONObject json=JSONObject.fromObject(obj);
/*将JSON对象转成字符串*/
//String str=json.toString
/*将Java对象转成JSON对象，然后转成字符串*/
out.print(JSONObject.fromObject(user));
//在控制台输出结果
System.out.println(JSONObject.fromObject(user));
out.flush();
out.close();
}
}
写完这段代码以后，还得在web.xml中配置Servlet
三、小结
在本次试验中，使用了JSON对象，所以一定要引"Java JSON 包"。本例中通过Ajax请求和接收数据的过程中遇到了很多问题，大多是
语法错误，如下所示：
（1）JSP变量声明方式不当
例如：String password=user.password;
按照JavaScript中声明变量的方法，正确的写法是：var password=user.password.
（2）Ajax中通过param传递多个参数，param出现语法错误
例如：var param="userName="+encodeURIComponent(userName)+"act="+encodeURIComponent("loadUser");
这样的写法是错误的，Ajax中通过param传递多个参数，param的正确写法是：var param="userName"+
encodeURIComponent(userName)+"&act=loaderUser";
（3）混淆了通过JSON传递对象和列表的使用方法
通过JSON对象传递单个对象和列表数据时，发送端和接收端的写法略有不同，如果是列表写法如下：
发送端（Servlet）：out.print(JSONArray.fromObject(users));//其中users是List类型的列表，这个方法的作用是将List对象
转成JSON对象。
接收端(JSP)：var users=eval(xmlHttp.responseText);//服务器端返回字符串类型，转成JSON对象。其中xmlHttp是XMLHttpRequest对象
但如果是传递单个对象的话，写法如下：
发送端（Servlet）：out.print(JSONObject.fromObject(user));//注意是JSONObject类，user是单个对象
接收端（JSP）：var user=eval('('+xmlHttp.responseText+')');//注意两个括号不能省
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js中几种方法的总结。（实例方法、类方法、原型方法）
- [RxJS] Changing Behavior with MapTo
- JSP和Servlet的区别
- EXTJS 5 学习笔记2 - Components
- EXTJS 5 学习笔记1 - Class System
- js库Modernizr的介绍和使用
- Javascript的精华啊【如果以后我看到了或者想到了再继续补吧】
- jsp连接数据
- Javascript之this对象初解
- OC与JS互相调用
- Javascript动态调用css样式表
- 训练趣题：黑与白 有A、B、C、D、E五人，每人额头上都帖了一张黑或白的纸。（此处用javascript实现）
- js的抽象方法
- JavaScript实现表单的分向提交
- 对JS原型的一些理解
- js原生拖放
- 重读JSON
- DBHepler实现简jsp单登陆
- JS中的Json和String的转换
- javascript验证用户登录信息