使用post方法实现json往返传输数据的方法


Posted in Javascript onMarch 30, 2019

问题所在:

当我们想让应用层和http之间的所有接口都采用json,这样,客户端代码就可以纯碎用javascript的对象来编写,服务器打啊也可以纯粹的用Java的对象来编写。

我们使用的是post请求的方法,有些不同于get的方法!

客户端html代码:

<html>
<head>
<title>Hello Ajax version 5a</title>
<style type='text/css'>
* { font-family: Tahoma, Arial, sans-serif; }
#helloTitle{ color: #48f; }
.sidebar{
 background-color: #adf;
 color: navy;
 border: solid blue 1px;
 width: 180px;
 height: 200px;
 padding: 2px;
 margin: 3px;
 float: left;
}
</style>
<script type='text/javascript' src='prototype.js'></script>
<script type='text/javascript' src='json.js'></script>
<script type='text/javascript'>
window.onload=function(){
 $('helloBtn').onclick=function(){
  var name=$('helloTxt').value;
  new Ajax.Request(
   "hello5a.jsp",
   {
    postBody:JSON.stringify({name:name}),
    onComplete:function(xhr){
     var responseObj=JSON.parse(xhr.responseText);
     update(responseObj);
    }
   }
  );
 }
}
function update(obj){
 $('helloTitle').innerHTML="<h1>Hello, <b><i>"+obj.name+"</i></b></h1>";
 var likesHTML='<h5>'+obj.initial+' likes...</h5><hr/>';
 for (var i=0;i<obj.likes.length;i++){
  likesHTML+=obj.likes[i]+"<br/>";
 }
 $('likesList').innerHTML=likesHTML;
 var recipeHTML='<h5>'+obj.initial+'\'s favourite recipe</h5>';
 for (key in obj.ingredients){
  recipeHTML+=key+" : "+obj.ingredients[key]+"<br/>";
 }
 $('ingrList').innerHTML=recipeHTML;
}
</script>
</head>
<body>
<div id='likesList' class='sidebar'>
<h5>Likes</h5><hr/>
</div>
<div id='ingrList' class='sidebar'>
<h5>Ingredients</h5><hr/>
</div>
<div>
<div id='helloTitle'>
<h1>Hello, stranger</h1>
</div>
<p>Please introduce yourself by entering your name in the box below</p>
<input type='text' size='24' id='helloTxt'></input> <button id='helloBtn'>Submit</button>
</div>
</body>
</html>

jsp代码:

<jsp:directive.page contentType="application/javascript" import="java.util.*,net.sf.json.*"/>
<%
//read the request body
String json=request.getReader().readLine(); //读取post请求主体
JSONObject jsonObj=new JSONObject(json);//解析json字符串
String name=(String)(jsonObj.get("name"));//读取解析后的对象
jsonObj.put("initial",name.substring(0,1).toUpperCase()); //添加新的值
String[] likes=new String[]{ "JavaScript", "Skiing", "Apple Pie" };
jsonObj.put("likes",likes);
Map ingredients=new HashMap();
ingredients.put("apples","3kg");
ingredients.put("sugar","1kg");
ingredients.put("pastry","2.4kg");
ingredients.put("bestEaten","outdoors");
jsonObj.put("ingredients",ingredients);
%><%=jsonObj%>  
<!--以json的形式输出对象-->

另外我们还要用到包装集:

prototype.jsjson.js

效果如下:

使用post方法实现json往返传输数据的方法

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
javascript实现行拖动的方法
May 27 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 #Javascript
微信公众平台获取access_token的方法步骤
Mar 29 #Javascript
vue路由--网站导航功能详解
Mar 29 #Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 #Javascript
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 #Javascript
详解vue项目打包步骤
Mar 29 #Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 #jQuery
You might like
PHP的加密方式及原理
2012/06/14 PHP
33道php常见面试题及答案
2015/07/06 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
Python地图绘制实操详解
2019/03/04 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
新东网科技Java笔试题
2012/07/13 面试题
输入N,打印N*N矩阵
2012/02/20 面试题
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
工商管理毕业生推荐信
2013/12/24 职场文书
老师自我鉴定范文
2013/12/25 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书