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 相关文章推荐
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
JavaScript Reflect Metadata实现详解
Dec 12 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/04/09 欧美动漫
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
python实现名片管理系统项目
2019/04/26 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
python的dict判断key是否存在的方法
2020/12/09 Python
numba提升python运行速度的实例方法
2021/01/25 Python
python中altair可视化库实例用法
2021/01/26 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
大学生标准推荐信范文
2013/11/25 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
入党心得体会
2019/06/20 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
Python max函数中key的用法及原理解析
2021/06/26 Python
python代码实现备忘录案例讲解
2021/07/26 Python