当前位置：Gxlcms > JavaScript > JSON提交数据储存至服务端

JSON提交数据储存至服务端

时间：2021-07-01 10:21:17 帮助过：22人阅读

这次给大家带来JSON提交数据储存至服务端，JSON提交数据储存至服务端的注意事项有哪些，下面就是实战案例，一起来看一下。

准备Hero.java

  1. public class Hero { 
  2.  private String name; 
  3.  private int hp; 
  4.  public String getName() { 
  5.   return name; 
  6.  }  public void setName(String name) { 
  7.   this.name = name; 
  8.  } 
  9.  public int getHp() { 
  10.   return hp; 
  11.  } 
  12.  public void setHp(int hp) { 
  13.   this.hp = hp; 
  14.  } 
  15.  @Override 
  16.   public String toString() { 
  17.    return "Hero [name=" + name + ", hp=" + hp + "]"; 
  18.   } 
  19. } 
  20. public class Hero {
  21.  private String name;
  22.  private int hp;
  23.  public String getName() {
  24.  return name;
  25.  }
  26.  public void setName(String name) {
  27.  this.name = name;
  28.  }
  29.  public int getHp() {
  30.  return hp;
  31.  }
  32.  public void setHp(int hp) {
  33.  this.hp = hp;
  34.  }
  35.  @Override
  36.  public String toString() {
  37.    return "Hero [name=" + name + ", hp=" + hp + "]";
  38.   }
  39. }submit.html文件
  40. [html] view plain copy print?<!DOCTYPE html> 
  41. <html> 
  42. <head> 
  43. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  44. <title>用AJAX以JSON方式提交数据</title> 
  45. <script type="text/javascript" src="jquery.min.js"></script> 
  46. </head> 
  47. <body> 
  48.  <form > 
  49.   名称：<input type="text" id="name"/><br/> 
  50.   血量：<input type="text" id="hp"/><br/> 
  51.   <input type="button" value="提交" id="sender">  
  52.  </form> 
  53.  <p id="messagep"></p> 
  54.  <script> 
  55.  $('#sender').click(function(){ 
  56.   var name=document.getElementById('name').value; 
  57.   var hp=document.getElementById('hp').value; 
  58.   var hero={"name":name,"hp":hp}; 
  59.   var url="submitServlet"; 
  60.   $.post( 
  61.     url, 
  62.     {"data":JSON.stringify(hero)}, 
  63.     function(data) { 
  64.       alert("提交成功，请在Tomcat控制台查看服务端接收到的数据"); 
  65.    });  
  66.  }); 
  67.  </script> 
  68. </body> 
  69. </body> 
  70. </html> 
  71. <!DOCTYPE html>
  72. <html>
  73. <head>
  74. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  75. <title>用AJAX以JSON方式提交数据</title> 
  76. <script type="text/javascript" src="jquery.min.js"></script> 
  77. </head> 
  78. <body> 
  79.  <form > 
  80.   名称：<input type="text" id="name"/><br/> 
  81.   血量：<input type="text" id="hp"/><br/> 
  82.   <input type="button" value="提交" id="sender"> 
  83.  </form> 
  84.  <p id="messagep"></p> 
  85.  <script> 
  86.  $('#sender').click(function(){ 
  87.   var name=document.getElementById('name').value; 
  88.   var hp=document.getElementById('hp').value; 
  89.   var hero={"name":name,"hp":hp}; 
  90.   var url="submitServlet"; 
  91.   $.post(
  92.    url, 
  93.    {"data":JSON.stringify(hero)},
  94.    function(data) { 
  95.     alert("提交成功，请在Tomcat控制台查看服务端接收到的数据");
  96.    }); 
  97.  }); 
  98.  </script> 
  99. </body> 
  100. </body>
  101. </html>

JSON.stringify函数的作用是将一个javascript对象，转换为JSON格式的字符串。

准备SubmitServlet用来接收数据

  1. import java.io.IOException; 
  2. import javax.servlet.ServletException; 
  3. import javax.servlet.http.HttpServlet; 
  4. import javax.servlet.http.HttpServletRequest; 
  5. import javax.servlet.http.HttpServletResponse; 
  6. import net.sf.json.JSONObject; 
  7. public class SubmitServlet extends HttpServlet { 
  8.  protected void service(HttpServletRequest request, HttpServletResponse response) 
  9.    throws ServletException, IOException { 
  10.   String data =request.getParameter("data"); 
  11.   System.out.println("服务端接收到的数据是：" +data); 
  12.   JSONObject json=JSONObject.fromObject(data); 
  13.   System.out.println("转换为JSON对象之后是："+ json); 
  14.   Hero hero = (Hero)JSONObject.toBean(json,Hero.class); 
  15.   System.out.println("转换为Hero对象之后是："+hero); 
  16.  } 
  17. } 
  18. import java.io.IOException;
  19. import javax.servlet.ServletException;
  20. import javax.servlet.http.HttpServlet;
  21. import javax.servlet.http.HttpServletRequest;
  22. import javax.servlet.http.HttpServletResponse;
  23. import net.sf.json.JSONObject; 
  24. public class SubmitServlet extends HttpServlet { 
  25.  protected void service(HttpServletRequest request, HttpServletResponse response) 
  26.    throws ServletException, IOException {
  27.   String data =request.getParameter("data");
  28.   System.out.println("服务端接收到的数据是：" +data);
  29.   JSONObject json=JSONObject.fromObject(data); 
  30.   System.out.println("转换为JSON对象之后是："+ json);
  31.   Hero hero = (Hero)JSONObject.toBean(json,Hero.class); 
  32.   System.out.println("转换为Hero对象之后是："+hero);
  33.  } 
  34. }

1. 获取浏览器提交的字符串

2. 把字符串转换为JSON对象

3. 把JSON对象转换为Hero对象

最后配置web.xml

  1. <?xml version="1.0" encoding="UTF-8"?> 
  2. <web-app> 
  3.   <servlet> 
  4.   <servlet-name>SubmitServlet</servlet-name> 
  5.   <servlet-class>SubmitServlet</servlet-class> 
  6.  </servlet> 
  7.  <servlet-mapping> 
  8.   <servlet-name>SubmitServlet</servlet-name> 
  9.   <url-pattern>/submitServlet</url-pattern> 
  10.  </servlet-mapping> 
  11. </web-app> 
  12. <?xml version="1.0" encoding="UTF-8"?>
  13. <web-app>
  14.  <servlet>
  15.   <servlet-name>SubmitServlet</servlet-name>
  16.   <servlet-class>SubmitServlet</servlet-class>
  17.  </servlet>
  18.  <servlet-mapping>
  19.   <servlet-name>SubmitServlet</servlet-name>
  20.   <url-pattern>/submitServlet</url-pattern>
  21.  </servlet-mapping>

</web-app>启动tomcat访问http://127.0.0.1:8080/项目名/submit.html

在tomcat控制台看到传来的数据

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

实现js同源策略与跨域访问步骤详解

react做出手机数据同步显示在界面功能

以上就是JSON提交数据储存至服务端的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！