下面我就为大家带来一篇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 按钮后的效果
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
以上是ajax响应json字符串和json数组的实例(图文教程)的详细内容。更多信息请关注PHP中文网其他相关文章!

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

Atom编辑器mac版下载
最流行的的开源编辑器

Dreamweaver Mac版
视觉化网页开发工具

PhpStorm Mac 版本
最新(2018.2.1 )专业的PHP集成开发工具

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。