当前位置: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网其它相关文章!

人气教程排行