使用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下判断是否为闰年的Datetime包
Oct 26 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
canvas实现贪食蛇的实践
Feb 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
动态新闻发布的实现及其技巧
2006/10/09 PHP
第六节--访问属性和方法
2006/11/16 PHP
PHP 时间日期操作实战
2011/08/26 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
一些常用的Javascript函数
2006/12/22 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
用python写的一个wordpress的采集程序
2016/02/27 Python
python 性能优化方法小结
2017/03/31 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
一百行python代码将图片转成字符画
2021/02/19 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
机械设计及其自动化专业推荐信
2013/10/31 职场文书
银行简历自我评价
2014/02/11 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书