Servlet返回的数据js解析2种方法


Posted in Javascript onDecember 12, 2019

这篇文章主要介绍了Servlet返回的数据js解析2种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

方式1:Json

接收函数:ajax.responseText后面没括号

其实在之前所说的ajax中还遗留了一些问题就是,Servlet返回给js的数据是如何被js解析的呢?

之前只是发送了一句话,所以他就以html的格式进行解析就成功了,但是在实际中我们往往发送的数据是存在一个对象当中的又或者是一组对象当中的,我们应该如何发送呢?

json:js当中有一种有一种结构就是json,说白了就是键值对。

例如下面的:

{ "firstName":"John" , "lastName":"Doe" }

我们可以在Servlet将属性与值进行拼接,得到json格式的字符串,这样js中就能以这样的格式进行数据的解析了。

类似于下面这样:

resp.getWriter().write("{name:"+u.getHeroName()+ 
                ",lifenum:"+u.getLifeNum()+
                ",type:"+u.getType()+
                ",desc:"+u.getDesc()
        +"}")

但是对于懒癌来说这样的方式是极不友好的,所以就要说到强大的jar包了。

有一款名为gson的jar包可以帮你完成拼接的工作

对于使用就是你直接将对象丢进去就好,它会自动帮你转为json格式。

然后又有问题来了,json的数据给js有什么用,我们一般操纵的是对象呀!

别慌,eval帮你解决

Servlet返回的数据js解析2种方法

方式2:XML进行解析

接收函数:ajax.responseXML后面没括号

可以将用户数据以Xml进行发送然后js也以xml格式解析

用户数据的xml可以写在jsp中,然后js的跳转(open函数)就不用跳转到Servlet中而是jsp中找用户数据

用户数据jsp:

<%@ page language="java" contentType="text/xml; charset=utf-8"%>
<user>
  <name>李四</name>
  <pwd>123</pwd>
</user>

ajax接收数据jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
  pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
  function getXML(){
    //创建ajax引擎对象
      var ajax;
      if(window.XMLHttpRequest){//火狐
        ajax=new XMLHttpRequest();
      }else if(window.ActiveXObject){//ie
        ajax=new ActiveXObject("Msxml2.XMLHTTP");
      }
    //复写onreadystatechange
      ajax.onreadystatechange=function(){
        //判断Ajax状态吗
        if(ajax.readyState==4){
          //判断响应状态吗
          if(ajax.status==200){
            //获取响应内容
            var doc=ajax.responseXML;
            //处理响应内容
              //获取元素对象
              alert(doc.getElementsByTagName("name")[0].innerHTML);
          }
        }
      }
    //发送请求
      ajax.open("get","xml.jsp",true);
      ajax.send(null);
  }


</script>
</head>
<body>
  <h3>XML数据格式学习</h3>
  <hr>
  <input type="button" value="测试XML" onclick="getXML()" />
  
  
  
</body>
</html>

但是这种方式没有json好,所以推荐用json方式进行进行解析会更好一点。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery-ui中自动完成实现方法
Jun 10 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
js实现3D照片墙效果
Oct 28 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 #Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 #Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 #Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 #Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 #Javascript
微信小程序背景音乐开发详解
Dec 12 #Javascript
vue实现商城秒杀倒计时功能
Dec 12 #Javascript
You might like
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
Python中的下划线详解
2015/06/24 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
大韩航空官方网站:Korean Air
2017/10/25 全球购物
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
国贸专业毕业求职信
2014/06/11 职场文书
2015年青年教师工作总结
2015/05/25 职场文书