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

最新推荐文章于 2024-03-31 17:25:15 发布
最新推荐文章于 2024-03-31 17:25:15 发布
阅读量2.8k 收藏 7
点赞数 1
分类专栏： JavaEE 文章标签： JSON AJAX
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35885488/article/details/79777682
版权

准备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() {
	        return "Hero [name=" + name + ", hp=" + hp + "]";
	    }
}

submit.html文件

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>用AJAX以JSON方式提交数据</title>  
<script type="text/javascript" src="jquery.min.js"></script>  
</head>  
<body>  
    <form >  
       名称：<input type="text" id="name"/><br/>  
        血量：<input type="text" id="hp"/><br/>  
        <input type="button" value="提交" id="sender">   
    </form>  
    <div id="messageDiv"></div>  
      
    <script>  
    $('#sender').click(function(){  
        var name=document.getElementById('name').value;  
        var hp=document.getElementById('hp').value;  
        var hero={"name":name,"hp":hp};  
        var url="submitServlet";  
          
        $.post(
        		url, 
        		{"data":JSON.stringify(hero)},
        		function(data) {  
		             alert("提交成功，请在Tomcat控制台查看服务端接收到的数据");
         });   

          
    });  
    </script>  
</body>  
  
</body>
</html>

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

 

准备SubmitServlet用来接收数据

import java.io.IOException;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import net.sf.json.JSONObject; 
   
public class SubmitServlet extends HttpServlet { 
    protected void service(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        String data =request.getParameter("data");
         
        System.out.println("服务端接收到的数据是：" +data);
  
        JSONObject json=JSONObject.fromObject(data); 
          
        System.out.println("转换为JSON对象之后是："+ json);
           
        Hero hero = (Hero)JSONObject.toBean(json,Hero.class); 
        System.out.println("转换为Hero对象之后是："+hero);
    } 
}

1. 获取浏览器提交的字符串
2. 把字符串转换为JSON对象

 

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

 

最后配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app>
 
    <servlet>
        <servlet-name>SubmitServlet</servlet-name>
        <servlet-class>SubmitServlet</servlet-class>
    </servlet>
 
    <servlet-mapping>
        <servlet-name>SubmitServlet</servlet-name>
        <url-pattern>/submitServlet</url-pattern>
    </servlet-mapping>
 
</web-app>

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

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

 

 

获取一个对象

准备GetOneServlet

import java.io.IOException;
import java.io.Writer;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import net.sf.json.JSONObject; 
   
public class GetOneServlet extends HttpServlet { 
    protected void service(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
          
        Hero hero = new Hero();
        hero.setName("盖伦");
        hero.setHp(353);
         
        JSONObject json= new JSONObject();
   
        json.put("hero", JSONObject.fromObject(hero));
        response.setContentType("text/html;charset=utf-8"); 
        response.getWriter().print(json);
    } 
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app>
 
    <servlet>
        <servlet-name>SubmitServlet</servlet-name>
        <servlet-class>SubmitServlet</servlet-class>
    </servlet>
 
    <servlet-mapping>
        <servlet-name>SubmitServlet</servlet-name>
        <url-pattern>/submitServlet</url-pattern>
    </servlet-mapping>
    <servlet>
        <servlet-name>GetOneServlet</servlet-name>
        <servlet-class>GetOneServlet</servlet-class>
    </servlet>
 
    <servlet-mapping>
        <servlet-name>GetOneServlet</servlet-name>
        <url-pattern>/getOneServlet</url-pattern>
    </servlet-mapping>
 
</web-app>

getOne.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>用AJAX以JSON方式获取数据</title> 
<script type="text/javascript" src="jquery.min.js"></script> 
</head> 
<body> 
    <input type="button" value="通过AJAX获取一个Hero对象" id="sender">  
   
    <div id="messageDiv"></div> 
       
    <script> 
    $('#sender').click(function(){ 
        var url="getOneServlet"; 
        $.post(
                url,
                function(data) {
                     var json=JSON.parse(data); 
                     var name =json.hero.name; 
                     var hp = json.hero.hp;
                     $("#messageDiv").html("英雄名称："+name + "<br>英雄血量:" +hp );
                      
         });  
    }); 
    </script> 
</body> 
   
</body>
</html>

测试(重启tomcat)

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

 

3 获取多个对象

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import net.sf.json.JSONSerializer; 
   
public class GetManyServlet extends HttpServlet { 
    protected void service(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        List<Hero> heros = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            Hero hero = new Hero();
            hero.setName("name"+i);
            hero.setHp(500+i);
            heros.add(hero);
        }
         
        String result =JSONSerializer.toJSON(heros).toString();
 
        response.setContentType("text/html;charset=utf-8"); 
        response.getWriter().print(result);
    } 
    public static void main(String[] args) {
        List<Hero> heros = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            Hero hero = new Hero();
            hero.setName("name"+i);
            hero.setHp(500+i);
            heros.add(hero);
        }
         
        System.out.println(JSONSerializer.toJSON(heros).toString());
    }
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app>
 
    <servlet>
        <servlet-name>SubmitServlet</servlet-name>
        <servlet-class>SubmitServlet</servlet-class>
    </servlet>
 
    <servlet-mapping>
        <servlet-name>SubmitServlet</servlet-name>
        <url-pattern>/submitServlet</url-pattern>
    </servlet-mapping>
    <servlet>
        <servlet-name>GetOneServlet</servlet-name>
        <servlet-class>GetOneServlet</servlet-class>
    </servlet>
 
    <servlet-mapping>
        <servlet-name>GetOneServlet</servlet-name>
        <url-pattern>/getOneServlet</url-pattern>
    </servlet-mapping>
    <servlet>
        <servlet-name>GetManyServlet</servlet-name>
        <servlet-class>GetManyServlet</servlet-class>
    </servlet>
 
    <servlet-mapping>
        <servlet-name>GetManyServlet</servlet-name>
        <url-pattern>/getManyServlet</url-pattern>
    </servlet-mapping>
 
</web-app>

getMany.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>用AJAX以JSON方式获取数据</title> 
<script type="text/javascript" src="jquery.min.js"></script> 
</head> 
<body> 
    <input type="button" value="通过AJAX获取多个Hero对象" id="sender">  
   
    <div id="messageDiv"></div> 
       
    <script> 
    $('#sender').click(function(){ 
        var url="getManyServlet"; 
        $.post(
                url,
                function(data) {
                    var heros = $.parseJSON(data);
                     for(i in heros){
                         var old = $("#messageDiv").html();
                         var hero = heros[i];
                         $("#messageDiv").html(old + "<br>"+hero.name+"   -----   "+hero.hp); 
                     }
         });  
    }); 
    </script> 
</body> 
   
</body>
</html>

 

测试(重启tomcat)

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

 

 

 

 

sisi.li8
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
java服务端生成json（json服务端）
03-02
java服务端生成json（json服务端），可以在浏览器上访问获取查看json，已测试通过
HTTP服务端JSON服务端
weixin_34216036的博客
06-09 159
HTTP服务端JSON服务端 最后更新日期:  2014-5-18 Author: Kagula 阅读前提： CMake工具的基本使用 内容简单介绍：    CPPCMS是个开源Web开发框架，通过它能够非常easy实现HTTP服务和JSON服务，这里介绍CPPCMS开发环境的搭建。写一个CPPCMS測试程序，它建立HTTP服务，向浏览器返回Hello,World页面。CPPCM...
搭建json-hero，让阅读JSON变得简单
最新发布
2403_83055029的博客
03-31 662
将同步代码复制到脚本内容中，并且根据个人实际情况修改，如果你的1p安装在默认目录下，那么无需修改，如果你安装在自定义目录下，需要修改app_local_dir的值，例如你的1p安装在"/server"目录下，那么这里需要修改为。如果你希望使用反向代理，那么无需勾选端口外部访问，并且反向代理您的回环ip:port（127.0.0.1:port）或者外网ip:port。点击右上角的share可以将此文件暂存在服务器上并可以由获得到此分享链接的人点击右下角的下载按钮下载json。
使用JSON数据向服务器提交数据
weixin_43958308的博客
01-28 355
//首先声明一下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"
json服务端简易实现
qq1105273619的博客
04-24 188
orm模型中声明一个方法，可以将实例化后对象的数据转换为字典表格式 class Product_Detail(db.Model): """声明产品明细表""" __tablename__='T_S_Product_Detail' id=db.Column(db.Integer,primary_key=True) color=db.Column(db.Stri...
JSON通用服务端处理
走向架构师之路
12-07 1777
最近在学习JavaScript，发现不论是ext还是prototype都很推崇json这种通信协议的格式，但是这两个框架都是比较偏前端的，和dwr不同，dwr是一个一站式的ajax框架，不仅提供了客户端的工具方法，也包括服务端的配置和通信的处理。而ext和prototype等仅仅设置好了json的接口并对ajax通信做了封装，相对而言是一种比较“纯粹”的AJAX实现，当然ext还包括了大量的图形组
使用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 String toString()
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:...
在线json服务器,json服务器
weixin_36475420的博客
07-31 377
android跟服务器使用json传递数据最近在做项目,使用了json传递数据,把服务器对象转换成json字符串返回,android使用gson包解析json字符串变成对象. 1.服务器代码编写,我这边是在servlet里面 Peronperson=newPerson("张三","男");Peron是自定义...文章ansen_6662016-04-292179浏览量iOS开发网络篇—发送js...
JSON提交利器——serializeJSON
ywxrjh的博客
03-18 3191
文件异步上传 实现的是点击表单中文件上传选择完文件后就已经上传而不是和表单其他数据一起提交。这样做的目的是，提交复杂表单时，可以采用后台更容易解析的JSON数据格式进行提交，方便后台的Springmvc数据自动组装，减免了手动组装工作量。 注：当需要上传的表单数据对象比较复杂时，推荐使用文件异步上传方式，文件和表单分开，让后台可以更方便的处理表单数据。 用法 Html 在文件上传的in...
JS onsubmit下次调用commit（）不仅是jquery，而且是javascript
04-03
看起来您可能正在创建一个无尽的循环； 当您的验证脚本调用提交，然后调用验证，然后调用提交...。您应该使用类似以下的准代码：function validateit（）{//如果经过验证，则执行验证工作{返回true; 返回false； }
application/json-常见的post提交数据的方式
seimeii的博客
05-16 1104
application/json-常见的post提交数据的方式
post提交的数据格式说明
一路向前ylc
03-29 993
最近项目部署到新环境tomcat+mysql,想看看项目部署成功没有，就用soupui调对应接口开测试，soupui使用比较简单，给上接口地址，入参xml报文，把入参的media Type设置为application/xml 点击调用就可以了。但是点击调用返回值为空。对，就是啥都没返回。XML,JSON,HTML这些选项都是空的。也不报错。我就郁闷了。后来问组里高手才知道post请求的入参数据格式不正确，soupui不是万能的测试工具。这算是掉坑了 错误原因就是不知道post请求服务的数据格式是有要求.
JSON（二）：服务器端和客户端的JSON处理
孙端
08-30 2243
上面介绍了如何用 JSON表示数据，接下来，我们还要解决如何在服务器端生成 JSON 格式的数据以便发送到客户端，以及客户端如何使用 JavaScript 处理 JSON 格式的数据。     先来看看服务器如何输出JSON格式的数据吧。     以 Java 为例，我们将演示将一个Java 对象编码为 JSON 格式的文本。将 String 对象编码为 JSON格式时，只需处理好特殊字符即可
1. jquery用submit提交表单返回json
zhaoyingjiao的专栏
11-11 3702
1. 由于项目的需求，需要上传图片，还需要
调试json提交数据，模拟json发送数据POST或GET
webnoties的专栏
11-21 2686
无标题文档 $(function(){ $("#post_submit").click(function(){ var post_url = $("#post_url").val(); var post_data = eval("(" + $("#post_data").val() + ")"); $.ajax( { type:"post"
spring boot 学习笔记（005）提交json对象
热门推荐
yihui823的专栏
06-29 2万+
提交post对象应该是很简单的，但是掉ajax的坑里去了。 1，首先，HelloWorld.java 代码中加入： @RequestMapping(value="/trequest", method = RequestMethod.POST) @ResponseBody public UserInfo trequest(@RequestBody UserInfo
node.js依赖express解析post请求四种数据格式
04-30
如果服务端需要处理 JSON 格式的请求，可以使用 express.json() 中间件来解析请求体数据。 3. Raw 格式：Raw 格式是一种原始数据格式，不做任何编码和处理。如果客户端发送的 POST 请求数据是 Raw 格式的，服务端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sisi.li8

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值