运用Ajax和JSON对象实现JSP和Servlet的数据传递

最新推荐文章于 2024-03-16 21:53:37 发布

qq_15079499

最新推荐文章于 2024-03-16 21:53:37 发布

阅读量564

点赞数

文章标签： ajax json 自动加载数据

本文链接：https://blog.csdn.net/qq_15079499/article/details/50839674

版权

一、JSP代码

1、函数部分

2、表单

<body οnlοad="loadUser()">
            
           <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>
                       <td><input type="password" name="password" id="password"
                           οnclick="loadUser()" οnblur="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" οnblur="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"
                           οnblur="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"
                               οnblur="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"
                           οnblur="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"
                           οnblur="check(this)" οnclick="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+')');//注意两个括号不能省

qq_15079499

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
运用Ajax和JSON对象实现JSP和Servlet的数据传递

一、JSP代码 1、函数部分 var xmlHttp; //自定义一个方法，代替document.getElementById() function $(id) { return document.getElementById(id); } //建立XMLHttpRequest对象 function
复制链接

扫一扫