使用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 相关文章推荐
实用javaScript技术-屏蔽类
Aug 15 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
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新手上路(五)
2006/10/09 PHP
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
php简单生成随机数的方法
2015/07/30 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
微信小程序云开发之新手环境配置
2019/05/16 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
Python项目跨域问题解决方案
2020/06/22 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
实习护理工作自我评价
2013/09/25 职场文书
股权投资意向书
2014/04/01 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
一文搞懂MySQL索引页结构
2022/02/28 MySQL