ajax响应json字符串和json数组的实例(详解)

最近上班太忙，晚上抽空整理一下ajax请求中，后台返回json字符串和json数组的场景，以及前台的处理示例。

直接看代码。

json字符串的后台响应

package com.ajax;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/jsonStr")
public class JsonStr extends HttpServlet {

 /**
 *
 */
 private static final long serialVersionUID = 1L;

 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp)
  throws ServletException, IOException {
 // 构造json对象
 String resStr = "{" + "name:" + "\"zhangsan\"," + "id:" + "\"id001\"" + "}";

 // 输出json对象到前台
 PrintWriter out = resp.getWriter();
 out.write(resStr);
 out.flush();
 out.close();
 }

 @Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp)
  throws ServletException, IOException {
 doGet(req, resp);
 }
}

json数组的后台响应

package com.ajax;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/jsonArr")
public class JsonArr extends HttpServlet {

 /**
 *
 */
 private static final long serialVersionUID = 1L;

 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp)
  throws ServletException, IOException {
 // 构造json对象
 String resStr1 = "{" + "name:" + "\"zhangsan\"," + "id:" + "\"id001\"" + "}";
 String resStr2 = "{" + "name:" + "\"lisi\"," + "id:" + "\"id002\"" + "}";
 String resStr3 = "{" + "name:" + "\"wangwu\"," + "id:" + "\"id003\"" + "}";

 // 构造json数组
 String jsonArr = "[" + resStr1 + "," + resStr2 + "," + resStr3 + "]";

 // 输出json数组到前台
 PrintWriter out = resp.getWriter();
 out.write(jsonArr);
 out.flush();
 out.close();
 }

 @Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp)
  throws ServletException, IOException {
 doGet(req, resp);
 }
}

前台页面

<%@ 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">
<title>Json</title>
</head>
<body>
 <br><br>
 <input type="button" value="JsonStr" onclick="jsonStr()" />
 <br><br>
 <table>
 <tr>
  <td>username</td>
  <td><input id="username"></td>
 </tr>
 <tr>
  <td>id</td>
  <td><input id="id"></td>
 </tr>
 </table>
 <br><br><br>
 <input type="button" value="JsonArr" onclick="jsonArr()" />
 <br><br>
 <table border="1" bordercolor="red">
 <caption>Json Array</caption>
 <thead>
  <tr>
  <th>Username</th>
  <th>Id</th>
  </tr>
 </thead>
 <tbody id="tb">
 </tbody>
 </table>
</body>
<script type="text/javascript">
 // json字符串处理方法
 function jsonStr() {
 var xhr = new XMLHttpRequest();
 xhr.open("get", "jsonStr");
 xhr.onreadystatechange = function(data) {
  if (xhr.readyState == 4 && xhr.status == 200) {
  // 将json字符串转换为json对象
  var obj = eval("(" + data.target.responseText + ")");
  document.getElementById("username").value = obj.name;
  document.getElementById("id").value = obj.id;
  }
 };
 xhr.send(null);
 }

 // json数组处理方法
 function jsonArr() {
 var xhr = new XMLHttpRequest();
 xhr.open("get", "jsonArr");
 xhr.onreadystatechange = function(data) {
  if (xhr.readyState == 4 && xhr.status == 200) {
  // 将json字符串转换为json数组
  var obj = eval("(" + data.target.responseText + ")");

  // 创建代码片段，用于存放表格行
  var oFragment = document.createDocumentFragment();

  // 根据json数组长度，产生行数据
  for (var i=0; i<obj.length; i++) {
   var trObj = document.createElement("tr");
   trObj.innerHTML = "<td>" + obj[i].name + "</td><td>" + obj[i].id + "</td>";
   oFragment.appendChild(trObj);
  }

  // 将行数据添加在表格的tBody部分
  document.getElementById("tb").appendChild(oFragment);
  }
 };
 xhr.send(null);
 }
</script>
</html>

页面效果图

点击 JsonStr 和 JsonArr 按钮后的效果

好了，整理完毕，示例仅供学习。

对了，有一点疑惑，之前回调函数中，获取响应数据的时候，都是直接通过data.responseText 来获取的，今天的代码中必须使用data.target.responseText，不知道为什么？有知道的朋友烦请告知一声，非常感谢。

以上这篇ajax响应json字符串和json数组的实例(详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js 转json格式的字符串为对象或数组(前后台)的方法

    一.前台 // 转换成对象 var myObject = JSON.parse(_data); alert("对象:"+myObject.msg); // 转换成数组 var myobj = eval("["+_data+"]"); for (var i = 0; i < myobj.length; i++) { alert("数组:"+myobj[i].msg); } //把json格式的字符串转成JSON对象 var

  • PHP封装返回Ajax字符串和JSON数组的方法

    实例如下: <?php class DBDA { public $host="localhost"; public $uid = "root"; public $pwd = "123"; public $dbname = "mydb"; //成员方法 public function Query($sql,$type=1) { $db = new MySQLi($this->host,$this->uid,$t

  • 把json格式的字符串转换成javascript对象或数组的方法总结

    第一种 JSON.parse(jsonString) 第二种 eval("("+jsonString+")") 第三种 var obj=(function ToJSON(o){ if(typeof(o)=="string")try{return new Function("return "+o)();}catch(e){return null;} })("[{name:'zhangsan',age:'24'},{na

  • Jquery解析json字符串及json数组的方法

    本文实例讲述了Jquery解析json字符串及json数组的方法.分享给大家供大家参考.具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-1.6.2.min.js"></script> </head> <body> <hr /> <h3>

  • JS解析json数据并将json字符串转化为数组的实现方法

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <SCRIPT LANGUAGE="JavaScript"> var t="{'firstName': 'cyra', 'lastName': 'ric

  • JS中的数组转变成JSON格式字符串的方法

    有一个JS数组,如: var arr = [["projectname1","projectnumber1"],["projectname2","projectnumber2"],["projectname3","projectnumber3"]]; 想将此数组转换成JSON字符串,如: var jsonarr = [{"projectname":projectnam

  • ajax响应json字符串和json数组的实例(详解)

    ajax响应json字符串和json数组的实例(详解)

    最近上班太忙,晚上抽空整理一下ajax请求中,后台返回json字符串和json数组的场景,以及前台的处理示例. 直接看代码. json字符串的后台响应 package com.ajax; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.serv

  • Json转化为Java对象的实例详解

    Json转化为Java对象的实例详解 问题:前后端数据交互时,经常会遇到Json串与Java对象转化的问题,有的Java对象中还包含了List对象等. 解决方案: 引入 json-lib包,Maven坐标如下: <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> <version>2.4</version> &l

  • Java 生成随机字符串数组的实例详解

    Java 生成随机字符串数组的实例详解 利用Collections.sort()方法对泛型为String的List 进行排序.具体要求: 1.创建完List<String>之后,往其中添加十条随机字符串 2.每条字符串的长度为10以内的随机整数 3.每条字符串的每个字符都为随机生成的字符,字符可以重叠 4.每条随机字符串不可重复 将涉及到的知识有: String.StringBuffer.ListArray.泛型.Collections.sort.foreach.Random等相关知识,算是

  • JavaScript数组方法实例详解

    JavaScript数组方法实例详解

    目录 简介 创建数组 创建方法 详解 方法大全 join() push()和 pop() shift() 和 unshift() sort() reverse() concat() slice() splice() indexOf()和 lastIndexOf() forEach() map() filter() fill()  (ES6 新增) every() some() includes() (ES7) reduce()和 reduceRight() toLocaleString() 和

  • C语言树状数组的实例详解

    C语言树状数组的实例详解 最近学了树状数组,给我的感觉就是 这个数据结构好神奇啊^_^ 首先她的常数比线段树小,其次她的实现复杂度也远低于线段树 (并没有黑线段树的意思=-=) 所以熟练掌握她是非常有必要的.. 关于树状数组的基础知识与原理网上一搜一大堆,我就不赘述了,就谈一些树状数组的应用好了 1,单点修改,求区间和 #define lowbit(x) (x&-x) // 设 x 的末尾零的个数为 y , 则 lowbit(x) == 2^y void Update(int i,int v)

  • 数据结构之数组Array实例详解

    数据结构之数组Array实例详解 数组Array 基本操作 Status InitArray(int dimm,...)//若维数dim和随后的各维长度合法,则构造相应的数组A,并返回OK Status DestroyArray() //销毁数组A Status Locate(va_list ap,int &off) //若ap指示的各下标值合法,则求出该元素在A中相对地址off Status Value(ElemType &e,...) //A是n维数组,e为元素变量,随后是n个下标值.

  • JSON字符串和对象之间的转换详解

    JSON(JavaScript Object Notation) 是JavaScript编程语言的一个子集.正因JSON是JavaScript的一个子集,所以它可清晰的运用于此语言中. eval函数 JSON文本转换为对象 为了将JSON文本转换为对象,可以使用eval函数.eval函数调用JavaScript编辑器.由于JSON是JavaScript的子集,因此编译器将正确的解析文本并产生对象结构.文本必须括在括号中避免产生JavaScript的语法歧义. var obj = eval('('

  • ajax在js中和jQuery中的用法实例详解

    目录 原生 JS 怎么发送一个 get 请求 怎么发送一个 post 请求 发送一个带有参数的 get 请求 发送一个带有参数的 post 请求 jQuery $.get 几个参数,怎么使用 $.post 几个参数,怎么使用 $.ajax 几个参数,怎么使用 JSONP $.ajax 怎么发送 jaonp 请求 总结 原生 JS 怎么发送一个 get 请求 创建一个 ajax 对象 var xhr = new XMLHttpRequest() 设置请求方式和请求地址[,是否异步] xhr.ope

  • Java中分割字符串的两种方法实例详解

    前言 相信大家应该都知道在java编程中,有时候我们需要把一个字符串按照某个特定字符.字母等作为截点分割这个字符串,这样我们就可以使用这个字符串的一部分或者把所有截取的内容保存到数组里等操作.下面这篇文章就给大家分享了两种分割的方法,下面来一起看看吧. 一.java.lang.String 的 split() 方法, JDK 1.4 or later public String[] split(String regex,int limit) 示例代码 public class StringSpl

  • Python当中的array数组对象实例详解

    计算机为数组分配一段连续的内存,从而支持对数组随机访问: 由于项的地址在编号上是连续的,数组某一项的地址可以通过将两个值相加得出,即将数组的基本地址和项的偏移地址相加. 数组的基本地址就是数组的第一项的机器地址.一个项的偏移地址就等于它的索引乘以数组的一个项所需要的内存单元数目的一个常量表示(在python中,这个值总是1) import array #array模块是python中实现的一种高效的数组存储类型.它和list相似,但是所有的数组成员必须是同一种类型,在创建数组的时候,就确定了数组

随机推荐