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 相关文章推荐
IE与FireFox中的childNodes区别
Oct 20 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
微信小程序实现横向滚动导航栏效果
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
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
react的hooks的用法详解
2020/10/12 Javascript
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
学前教育教师求职自荐信
2013/09/22 职场文书
信息专业本科生个人的自我评价
2013/10/28 职场文书
培训主管的岗位职责
2013/11/23 职场文书
个人教师自我评价范文
2013/12/02 职场文书
公司周年庆典邀请函
2014/01/12 职场文书
就业协议书的作用
2014/04/11 职场文书
大学生励志演讲稿
2014/04/25 职场文书
幼儿评语大全
2014/04/30 职场文书
酒店员工培训方案
2014/06/02 职场文书
化工实习心得体会
2014/09/09 职场文书
工程部主管岗位职责
2015/02/12 职场文书
公司考勤管理制度
2015/08/04 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
导游词之天津古文化街
2019/11/09 职场文书