使用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与css打造个性化的单选框和复选框
Oct 20 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
node.js博客项目开发手记
Mar 16 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
VueX模块的具体使用(小白教程)
Jun 05 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 session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
PHP实现合并discuz用户
2015/08/05 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
经验几则 推荐
2006/09/05 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
javascript面向对象快速入门实例
2015/01/13 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
详解在Python中处理异常的教程
2015/05/24 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
应用心理学个人的求职信
2013/12/08 职场文书
机械专业应届生求职信
2013/12/12 职场文书
经销商会议欢迎词
2014/01/11 职场文书
学习十八大的心得体会
2014/09/12 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
车间主任岗位职责
2015/02/03 职场文书
服务员岗位职责范本
2015/04/09 职场文书
小平小道观后感
2015/06/09 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python