使用JSON格式提交数据到服务端的实例代码


Posted in Javascript onApril 01, 2018

准备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 + "]"; 
  } 
} 
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文件
[html] view plain copy print?<!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> 
<!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); 
 } 
} 
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> 
<?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

使用JSON格式提交数据到服务端的实例代码

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

使用JSON格式提交数据到服务端的实例代码

总结

以上所述是小编给大家介绍的使用JSON格式提交数据到服务端的实例代码,希望对大家有所帮助,如果大家有任何疑问花园给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js获取图片长和宽度的代码
Nov 24 Javascript
js类型检查实现代码
Oct 29 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
Vue.js进阶知识点总结
Apr 01 #Javascript
vue 指定组件缓存实例详解
Apr 01 #Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 #Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 #Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 #Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 #Javascript
对Angular中单向数据流的深入理解
Mar 31 #Javascript
You might like
关于PHP中Object对象的笔记分享
2011/06/28 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
Python中threading模块join函数用法实例分析
2015/06/04 Python
Python pass详细介绍及实例代码
2016/11/24 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
腾讯公司的一个sql题
2013/01/22 面试题
在校大学生个人的自我评价
2014/02/13 职场文书
党员个人公开承诺书
2014/08/29 职场文书
优秀护士事迹材料
2014/12/25 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
2016年教师新年寄语
2015/08/18 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
创业计划书之餐饮
2019/09/02 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
python热力图实现的完整实例
2022/06/25 Python