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.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中文网其他相关文章!

热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

PHP数组转JSON的性能优化方法包括:使用JSON扩展和json_encode()函数;添加JSON_UNESCAPED_UNICODE选项以避免字符转义;使用缓冲区提高循环编码性能;缓存JSON编码结果;考虑使用第三方JSON编码库。

使用PHP和Ajax构建自动完成建议引擎:服务器端脚本:处理Ajax请求并返回建议(autocomplete.php)。客户端脚本:发送Ajax请求并显示建议(autocomplete.js)。实战案例:在HTML页面中包含脚本并指定search-input元素标识符。

Jackson库中的注解可控制JSON序列化和反序列化:序列化:@JsonIgnore:忽略属性@JsonProperty:指定名称@JsonGetter:使用获取方法@JsonSetter:使用设置方法反序列化:@JsonIgnoreProperties:忽略属性@JsonProperty:指定名称@JsonCreator:使用构造函数@JsonDeserialize:自定义逻辑

深入了解PHP:JSONUnicode转中文的实现方法在开发中,我们经常会遇到需要处理JSON数据的情况,而JSON中的Unicode编码在一些场景下会给我们带来一些问题,特别是当需要将Unicode编码转换为中文字符时。在PHP中,有一些方法可以帮助我们实现这个转换过程,下面将介绍一种常用的方法,并提供具体的代码示例。首先,让我们先了解一下JSON中Un

使用Ajax从PHP方法中获取变量是Web开发中常见的场景,通过Ajax可以实现页面无需刷新即可动态获取数据。在本文中,将介绍如何使用Ajax从PHP方法中获取变量,并提供具体的代码示例。首先,我们需要编写一个PHP文件来处理Ajax请求,并返回所需的变量。下面是一个简单的PHP文件getData.php的示例代码:

Ajax(异步JavaScript和XML)允许在不重新加载页面情况下添加动态内容。使用PHP和Ajax,您可以动态加载产品列表:HTML创建一个带有容器元素的页面,Ajax请求加载数据后将数据添加到该元素中。JavaScript使用Ajax通过XMLHttpRequest向服务器发送请求,从服务器获取JSON格式的产品数据。PHP使用MySQL从数据库查询产品数据,并将其编码为JSON格式。JavaScript解析JSON数据,并将其显示在页面容器中。点击按钮触发Ajax请求,加载产品列表。

PHP数组可通过json_encode()函数转换为JSON字符串(例如:$json=json_encode($array);),反之亦可用json_decode()函数从JSON转换为数组($array=json_decode($json);)。其他技巧还包括:避免深度转换、指定自定义选项以及使用第三方库。

PHP提供了以下函数来处理JSON数据:解析JSON数据:使用json_decode()将JSON字符串转换为PHP数组。创建JSON数据:使用json_encode()将PHP数组或对象转换为JSON字符串。获取JSON数据的特定值:使用PHP数组函数访问特定值,例如键值对或数组元素。
