用JSON格式提交数据到服务端

最新推荐文章于 2024-05-27 19:00:22 发布
最新推荐文章于 2024-05-27 19:00:22 发布
阅读量407 收藏 1
点赞数
分类专栏： Java

准备Hero.java

[html]  view plain  copy
  1. public class Hero {  
  2.     private String name;  
  3.     private int hp;  
  4.     public String getName() {  
  5.         return name;  
  6.     }  
  7.     public void setName(String name) {  
  8.         this.name = name;  
  9.     }  
  10.     public int getHp() {  
  11.         return hp;  
  12.     }  
  13.     public void setHp(int hp) {  
  14.         this.hp = hp;  
  15.     }  
  16.     @Override  
  17.      public String toString() {  
  18.             return "Hero [name=" + name + ", hp=" + hp + "]";  
  19.         }  
  20. }  

submit.html文件

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
  5. <title>用AJAX以JSON方式提交数据</title>    
  6. <script type="text/javascript" src="jquery.min.js"></script>    
  7. </head>    
  8. <body>    
  9.     <form >    
  10.        名称：<input type="text" id="name"/><br/>    
  11.         血量：<input type="text" id="hp"/><br/>    
  12.         <input type="button" value="提交" id="sender">     
  13.     </form>    
  14.     <div id="messageDiv"></div>    
  15.         
  16.     <script>    
  17.     $('#sender').click(function(){    
  18.         var name=document.getElementById('name').value;    
  19.         var hp=document.getElementById('hp').value;    
  20.         var hero={"name":name,"hp":hp};    
  21.         var url="submitServlet";    
  22.             
  23.         $.post(  
  24.                 url,   
  25.                 {"data":JSON.stringify(hero)},  
  26.                 function(data) {    
  27.                      alert("提交成功，请在Tomcat控制台查看服务端接收到的数据");  
  28.          });     
  29.   
  30.             
  31.     });    
  32.     </script>    
  33. </body>    
  34.     
  35. </body>  
  36. </html>  
JSON.stringify函数的作用是将一个javascript对象，转换为JSON格式的字符串。

准备SubmitServlet用来接收数据

[html]  view plain  copy
  1. import java.io.IOException;  
  2.    
  3. import javax.servlet.ServletException;  
  4. import javax.servlet.http.HttpServlet;  
  5. import javax.servlet.http.HttpServletRequest;  
  6. import javax.servlet.http.HttpServletResponse;  
  7.    
  8. import net.sf.json.JSONObject;   
  9.      
  10. public class SubmitServlet extends HttpServlet {   
  11.     protected void service(HttpServletRequest request, HttpServletResponse response)   
  12.             throws ServletException, IOException {  
  13.         String data =request.getParameter("data");  
  14.            
  15.         System.out.println("服务端接收到的数据是：" +data);  
  16.     
  17.         JSONObject json=JSONObject.fromObject(data);   
  18.             
  19.         System.out.println("转换为JSON对象之后是："+ json);  
  20.              
  21.         Hero hero = (Hero)JSONObject.toBean(json,Hero.class);   
  22.         System.out.println("转换为Hero对象之后是："+hero);  
  23.     }   
  24. }   
1. 获取浏览器提交的字符串
2. 把字符串转换为JSON对象

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

最后配置web.xml

[html]  view plain  copy
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app>  
  3.    
  4.     <servlet>  
  5.         <servlet-name>SubmitServlet</servlet-name>  
  6.         <servlet-class>SubmitServlet</servlet-class>  
  7.     </servlet>  
  8.    
  9.     <servlet-mapping>  
  10.         <servlet-name>SubmitServlet</servlet-name>  
  11.         <url-pattern>/submitServlet</url-pattern>  
  12.     </servlet-mapping>  
  13.    
  14. </web-app>  
启动tomcat访问 http://127.0.0.1:8080/项目名/submit.html


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




获取一个对象

准备GetOneServlet

[html]  view plain  copy
  1. import java.io.IOException;  
  2. import java.io.Writer;  
  3.    
  4. import javax.servlet.ServletException;  
  5. import javax.servlet.http.HttpServlet;  
  6. import javax.servlet.http.HttpServletRequest;  
  7. import javax.servlet.http.HttpServletResponse;  
  8.    
  9. import net.sf.json.JSONObject;   
  10.      
  11. public class GetOneServlet extends HttpServlet {   
  12.     protected void service(HttpServletRequest request, HttpServletResponse response)   
  13.             throws ServletException, IOException {  
  14.             
  15.         Hero hero = new Hero();  
  16.         hero.setName("盖伦");  
  17.         hero.setHp(353);  
  18.            
  19.         JSONObject json= new JSONObject();  
  20.      
  21.         json.put("hero", JSONObject.fromObject(hero));  
  22.         response.setContentType("text/html;charset=utf-8");   
  23.         response.getWriter().print(json);  
  24.     }   
  25. }   
web.xml
[html]  view plain  copy
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app>  
  3.    
  4.     <servlet>  
  5.         <servlet-name>SubmitServlet</servlet-name>  
  6.         <servlet-class>SubmitServlet</servlet-class>  
  7.     </servlet>  
  8.    
  9.     <servlet-mapping>  
  10.         <servlet-name>SubmitServlet</servlet-name>  
  11.         <url-pattern>/submitServlet</url-pattern>  
  12.     </servlet-mapping>  
  13.     <servlet>  
  14.         <servlet-name>GetOneServlet</servlet-name>  
  15.         <servlet-class>GetOneServlet</servlet-class>  
  16.     </servlet>  
  17.    
  18.     <servlet-mapping>  
  19.         <servlet-name>GetOneServlet</servlet-name>  
  20.         <url-pattern>/getOneServlet</url-pattern>  
  21.     </servlet-mapping>  
  22.    
  23. </web-app>  

getOne.html

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
  5. <title>用AJAX以JSON方式获取数据</title>   
  6. <script type="text/javascript" src="jquery.min.js"></script>   
  7. </head>   
  8. <body>   
  9.     <input type="button" value="通过AJAX获取一个Hero对象" id="sender">    
  10.      
  11.     <div id="messageDiv"></div>   
  12.          
  13.     <script>   
  14.     $('#sender').click(function(){   
  15.         var url="getOneServlet";   
  16.         $.post(  
  17.                 url,  
  18.                 function(data) {  
  19.                      var json=JSON.parse(data);   
  20.                      var name =json.hero.name;   
  21.                      var hp = json.hero.hp;  
  22.                      $("#messageDiv").html("英雄名称："+name + "<br>英雄血量:" +hp );  
  23.                         
  24.          });    
  25.     });   
  26.     </script>   
  27. </body>   
  28.      
  29. </body>  
  30. </html>  

测试(重启tomcat)

启动tomcat访问http://127.0.0.1:8080/项目名/getOne.html



3 获取多个对象

[html]  view plain  copy
  1. import java.io.IOException;  
  2. import java.util.ArrayList;  
  3. import java.util.List;  
  4.    
  5. import javax.servlet.ServletException;  
  6. import javax.servlet.http.HttpServlet;  
  7. import javax.servlet.http.HttpServletRequest;  
  8. import javax.servlet.http.HttpServletResponse;  
  9.    
  10. import net.sf.json.JSONSerializer;   
  11.      
  12. public class GetManyServlet extends HttpServlet {   
  13.     protected void service(HttpServletRequest request, HttpServletResponse response)   
  14.             throws ServletException, IOException {  
  15.         List<Hero> heros = new ArrayList<>();  
  16.         for (int i = 0; i < 10; i++) {  
  17.             Hero hero = new Hero();  
  18.             hero.setName("name"+i);  
  19.             hero.setHp(500+i);  
  20.             heros.add(hero);  
  21.         }  
  22.            
  23.         String result =JSONSerializer.toJSON(heros).toString();  
  24.    
  25.         response.setContentType("text/html;charset=utf-8");   
  26.         response.getWriter().print(result);  
  27.     }   
  28.     public static void main(String[] args) {  
  29.         List<Hero> heros = new ArrayList<>();  
  30.         for (int i = 0; i < 10; i++) {  
  31.             Hero hero = new Hero();  
  32.             hero.setName("name"+i);  
  33.             hero.setHp(500+i);  
  34.             heros.add(hero);  
  35.         }  
  36.            
  37.         System.out.println(JSONSerializer.toJSON(heros).toString());  
  38.     }  
  39. }   

web.xml

[html]  view plain  copy
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app>  
  3.    
  4.     <servlet>  
  5.         <servlet-name>SubmitServlet</servlet-name>  
  6.         <servlet-class>SubmitServlet</servlet-class>  
  7.     </servlet>  
  8.    
  9.     <servlet-mapping>  
  10.         <servlet-name>SubmitServlet</servlet-name>  
  11.         <url-pattern>/submitServlet</url-pattern>  
  12.     </servlet-mapping>  
  13.     <servlet>  
  14.         <servlet-name>GetOneServlet</servlet-name>  
  15.         <servlet-class>GetOneServlet</servlet-class>  
  16.     </servlet>  
  17.    
  18.     <servlet-mapping>  
  19.         <servlet-name>GetOneServlet</servlet-name>  
  20.         <url-pattern>/getOneServlet</url-pattern>  
  21.     </servlet-mapping>  
  22.     <servlet>  
  23.         <servlet-name>GetManyServlet</servlet-name>  
  24.         <servlet-class>GetManyServlet</servlet-class>  
  25.     </servlet>  
  26.    
  27.     <servlet-mapping>  
  28.         <servlet-name>GetManyServlet</servlet-name>  
  29.         <url-pattern>/getManyServlet</url-pattern>  
  30.     </servlet-mapping>  
  31.    
  32. </web-app>  

getMany.html

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
  5. <title>用AJAX以JSON方式获取数据</title>   
  6. <script type="text/javascript" src="jquery.min.js"></script>   
  7. </head>   
  8. <body>   
  9.     <input type="button" value="通过AJAX获取多个Hero对象" id="sender">    
  10.      
  11.     <div id="messageDiv"></div>   
  12.          
  13.     <script>   
  14.     $('#sender').click(function(){   
  15.         var url="getManyServlet";   
  16.         $.post(  
  17.                 url,  
  18.                 function(data) {  
  19.                     var heros = $.parseJSON(data);  
  20.                      for(i in heros){  
  21.                          var old = $("#messageDiv").html();  
  22.                          var hero = heros[i];  
  23.                          $("#messageDiv").html(old + "<br>"+hero.name+"   -----   "+hero.hp);   
  24.                      }  
  25.          });    
  26.     });   
  27.     </script>   
  28. </body>   
  29.      
  30. </body>  
  31. </html>  

测试(重启tomcat)

启动tomcat访问http://127.0.0.1:8080/项目名/getMany.html


YIYENANTIAN
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
application/json 四种常见的 POST 提交数据方式
anmoyyh的博客
04-18 6647
四种常见的 POST 提交数据方式     HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据，本文主要讨论 POST 提交数据的几种方式。 我们知道，HTTP 协议是以 ASCII 码传输，建立在 TCP/IP 协
使用JSON格式提交数据到服务端的实例代码
12-10
准备Hero.java public class Hero { private String name; private int hp; public String getName() { return name; } public void setName(String name) { this.name = name; } public int getHp() { return hp; } public void setHp(int hp) { this.hp = hp; } @Override public String toString()
使用JSON数据向服务器提交数据
weixin_43958308的博客
01-28 360
//首先声明一下Url String urlPath = "http://192.168.1.100:8080/test"; URL url; try { url = new URL(urlPath); // 然后我们使用httpPost的方式把lientKey封装成Json数据的形式传递给服务器 // 在这里呢我们要封装的时这样的数据 // {"Person":{"username":"zhangsan","age":"12"}} // 我们首先使用的是JsonObject封装 {"username"
【工具】2059- 前端调试工具超全汇总，效率翻倍！
最新发布
pingan8787
05-27 75
在当今的前端开发领域，调试工具已经成为每个开发者不可或缺的“利器”。它们帮助我们高效地定位问题、优化代码，并提升整体的开发体验。本文将详细介绍一系列前端调试工具，包括开发者工具、代码编辑器、移动端调试、远程调试、抓包&代理、Mock数据、接口调试、构建分析、性能测试、JSON查看、在线代码编辑器以及点击元素跳转代码等工具。让我们一起探索这些强大的工具，为前端调试增添更多便捷与高效！开发者工...
HTML POST提交参数给PHP并返回json，上传execl文件
a_靖的博客
05-17 4160
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 需求：AJAX post带参数请求接口，PHP接收后存入数据库；然后返回json数据循环渲染到HTML <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> &...
前端与后端传递数据 — — JSON
热门推荐
weixin_45565886的博客
10-10 2万+
前后端交互，前端与后端传递数据 — — JSON、Content-Type
Java中同时POST文件和提交JSON数据的方法
weixin_52721608的博客
09-10 2145
在Java中，可以使用类来进行HTTP请求，并实现同时POST文件和提交JSON数据的功能。下面将通过一篇文章的形式为您详细讲解这个过程。
JQuery以JSON方式提交数据到服务端示例代码
10-25
主要介绍了JQuery如何以JSON方式提交数据到服务端,需要的朋友可以参考下
ASP.NET webapi方式客户端提交签名数据到服务端返回JSON数据交互示例源码
06-22
客户端(Web/ApiClient/queryToken.aspx )以post方式提交json数据来访问API服务端（WebApi：ApiServe/queryToken.aspx）,api服务端接受到数据在云端处理以后在以json的形式返回给客户端 步骤：1.修改客户端: WebWeb:...
在使用ajax向后台发送json数据，存在格式不正确的问题
ct_1994的专栏
11-28 4972
在一次servlet服务器的项目中，想在前台使用json向后台发送请求，其中data的格式如下： var requestData = { "services": [{ "lightbulb" : [{"alpha":0}], "operation_status":[{"status":0}] }], "device_type": util
原生js的Ajax提交json数据到后台
zilingkong的博客
09-26 1万+
原生ajax发送json数据到后台接收（将json转换为name=tom&pwd=123格式的字符串，简单，不在本次测试内），需要做到几点： 1，post方式发送。 2、json对象必须转换为json格式字符串 3、（setQequestHeader，可以默认或者application/json;） 4、后台接收，必须用request.getInputStream()方式。 SO
requests 发送一个 json 格式的 post 请求
03-23 6673
今天给一位同学解决post发送数据格式为json格式的请求，顺便确认一下问题归属。
Ajax 提交json格式数据给后台
qq_41995896的博客
10-20 4370
Ajax 提交json格式数据 在实际的开发当中，尤其是在前后端分离的项目中，传输数据都是以json格式进行传输的，所以对于json格式数据的情求和响应的学习十分重要。 1、前端提交json格式数据 前端一般是通过 Ajax 进行表单提交 设置ajax的contentType属性contentType:application/json data属性提交的数据就需要是json格式的 data:'{"did":"","dname":"'+dname+'"}' 具体实现代码： <script typ
【ApiDoc】如何使用JSON格式提交请求
u013202518的博客
07-29 1126
其实网上已经有基本的介绍了，这里我把整个过程在封装的详细一点 但是restful接口基本是以json方式提交，但是json像swagger那样其实又不好看，又不直观，所以就想像apidoc这样既有表单形式的提交界面，又有最后自动封装成json的提交方式，嘻嘻~~ 直接在安装目录下面找send_sample_request.js，然后直接上手改 将96行的ajax form表单的...
提交表单时用json的格式提交
VSILENCE的博客
01-26 2810
关于提交表单的时候用json的格式提交数据，我感觉这样的通用性比较强。
go 写一个代码，向服务端提交json格式数据
04-22
好的，以下是一个向服务端提交json格式数据的示例代码： ```go package main import ( "bytes" "encoding/json" "net/http" ) func main() { url := "http://example.com" // 服务端的地址 data := map...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值