Ubuntu 14.04 Web 程序开发(4)基于JQuery+Ajax+Json+Servlet实现PUT GET

前端之家收集整理的这篇文章主要介绍了Ubuntu 14.04 Web 程序开发(4)基于JQuery+Ajax+Json+Servlet实现PUT GET前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

参考原文:Jquery+ajax+json+servlet原理和Demo

本文使用JQuery实现PUT/GET例子。

启动一个Servlet实例

到目前为止,也只是启动了一个index.jsp,需要还没有启动一个servlet。要启动一个servlet,需要在HelloWeb中新建一个类JsonAjaxServlet,并将其设置到Server的web.xml中,这样就可以访问这个Servlet实例了。以下是详细过程。

  1. 新建JsonAjaxServlet类(代码见附1)

    添加后的目录结构:
  2. 添加到Server的web.xml中

    添加如下代码
  1. <servlet>
  2. <servlet-name>jsonAjaxAction</servlet-name>
  3. <servlet-class>com.njupt.zhb.test.JsonAjaxServlet</servlet-class>
  4. </servlet>
  5. <servlet-mapping>
  6. <servlet-name>jsonAjaxAction</servlet-name>
  7. <url-pattern>/jsonAjaxAction</url-pattern>
  8. </servlet-mapping>

添加后如下图所示:

3. 运行结果截图

链接全路径:http://localhost:8080/HelloWeb/jsonAjaxAction?userName=tony&content=Sheldon

JQuery实现PUT GET

  1. 导入JQuery
    这里使用的是1.4.3.min.js,位于https://code.jquery.com/jquery-1.4.3.min.js
    将其保存于HelloWeb/WebContent/js目录下,目录结构如下:

  2. 更新index.jsp代码
    将index.jsp代码改成如下,该代码是在界面上添加了一个输入框和一个按钮。

index.jsp

  1. <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
  2. <%@ page language="java" import="java.util.*"%>
  3. <script type="text/javascript"> function query(name) { $.ajax({ type : "POST",url : "jsonAjaxAction?userName=" + name + "&content=Sheldon",timeout : 30000,dataType : "json",success : function(data) { alert("name: " + data.yourName); },}); } </script>
  4. <table>
  5. <tr>
  6. <td><label>UserName:</label></td>
  7. <td><input type="text" id="nameinput" name="name" /></td>
  8. <td><input type="button" value="query" onClick="query(nameinput.value)" /></td>
  9. </tr>
  10. </table>

运行结果如下:

附1:JsonAjaxServlet.java内容

  1. /* * $filename: JsonAjaxServlet.java,v $ * $Date: Sep 1,2013 $ * Copyright (C) ZhengHaibo,Inc. All rights reserved. * This software is Made by Zhenghaibo. */
  2. package com.njupt.zhb.test;
  3.  
  4. import java.io.IOException;
  5. import java.io.PrintWriter;
  6. import java.net.URLDecoder;
  7.  
  8. import javax.servlet.ServletException;
  9. import javax.servlet.http.HttpServlet;
  10. import javax.servlet.http.HttpServletRequest;
  11. import javax.servlet.http.HttpServletResponse;
  12.  
  13. /* *@author: ZhengHaibo *web: http://blog.csdn.net/nuptboyzhb *mail: zhb931706659@126.com *Sep 1,2013 Nanjing,njupt,China */
  14. public class JsonAjaxServlet extends HttpServlet{
  15.  
  16. /** * */
  17. private static final long serialVersionUID = 1L;
  18.  
  19. @Override
  20. protected void doGet(HttpServletRequest request,HttpServletResponse response)
  21. throws ServletException,IOException {
  22. // TODO Auto-generated method stub
  23. doPost(request,response);
  24. }
  25.  
  26. @Override
  27. protected void doPost(HttpServletRequest request,IOException {
  28. // TODO Auto-generated method stub
  29. request.setCharacterEncoding("utf-8");
  30.  
  31. String userName = request.getParameter("userName");
  32. userName=URLDecoder.decode(userName,"UTF-8");
  33.  
  34. String content = request.getParameter("content");
  35. content=URLDecoder.decode(content,"UTF-8");
  36.  
  37. System.out.println("userName:"+userName);
  38. System.out.println("content:"+content);
  39.  
  40. response.setCharacterEncoding("utf-8");
  41. PrintWriter out = response.getWriter();
  42. //将数据拼接成JSON格式
  43. out.print("{\"yourName\":\"" + userName + "\",\"yourContent\":\""+content+"\"}");
  44. out.flush();
  45. out.close();
  46. }
  47. }

猜你在找的Ubuntu相关文章