使用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 相关文章推荐
javascript 建设银行登陆键盘
Jun 10 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
js实现继承的5种方式
Dec 01 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
微信小程序纯文本实现@功能
Apr 08 Javascript
微信小程序使用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
德劲1104的电路分析与改良
2021/03/01 无线电
web方式ftp
2006/10/09 PHP
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
php 基础函数
2017/02/10 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
如何基于线程池提升request模块效率
2020/04/18 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
通过代码实例了解Python异常本质
2020/09/16 Python
python 动态绘制爱心的示例
2020/09/27 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
Python爬取某平台短视频的方法
2021/02/08 Python
广告学专业自荐信范文
2014/02/24 职场文书
小时代观后感
2015/06/10 职场文书
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
React四级菜单的实现
2022/04/08 Javascript
Hive常用日期格式转换语法
2022/06/25 数据库