使用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 相关文章推荐
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
JavaScript实现多球运动效果
Sep 07 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 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
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
ES6 十大特性简介
2020/12/09 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
党性教育心得体会
2014/09/03 职场文书
小学教师师德整改措施
2014/09/29 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android