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

最近上班太忙，晚上抽空整理一下创建交互式、快速动态网页应用的网页开发技术请求中，后台返回json字符串和json数组的场景，以及前台的处理示例。

直接看代码。

json字符串的后台响应

package com.ajax导入Java。io。ioexception导入Java。io。版画作家；导入javax。servlet。servletexception导入javax。servlet。注释。webservlet导入javax。servlet。http。HttpServlet导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletResponse@WebServlet('/jsonStr ')公共类jsonStr扩展了httpersvlet {/* * * */private static final long serial version id=1L；@覆盖受保护的void doGet(Httpservletrequest请求，HttpServletResponse响应)引发ServletException，IOException { //构造json对象string Resstr=' { ' name : ' ' \ '张三\ '，' id: ' ' \ ' id001 \ ' ' ' }//输出json对象到前台PrintWriter out=resp。getwriter()；出去。write(Resstr)；出去。flush()；出去。close()；} @ Override protected void doPost(httpersvletrequest req，HttpServletResponse resp)抛出ServletException，IOException { doGet(req，resp)；}}

json数组的后台响应

package com.ajax导入Java。io。ioexception导入Java。io。版画作家；导入javax。servlet。servletexception导入javax。servlet。注释。webservlet导入javax。servlet。http。HttpServlet导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletResponse@WebServlet('/jsonArr ')公共类jsonArr扩展了httpersvlet {/* * * */私有静态最终长串行版本uid=1L；@覆盖受保护的void doGet(Httpservletrequest请求，HttpServletResponse响应)引发ServletException，IOException { //构造json对象String Resstr 1=' { ' name : ' ' \ ' Zhang San \ '，' id : ' ' \ ' id 001 \ ' ' ' } String Resstr 2=' { ' name : ' ' \ ' Lisi \ '，' id : ' ' \ ' id 002 \ ' ' ' } String Restr 3=' { ' name : ' ' \ '吴王\ '，' id: ' ' \ ' id003 \ ' ' ' }//构造json数组String jsonArr='[' resStr1 '，' resStr2 '，' Resstr 3 ']'；//输出json数组到前台PrintWriter out=resp。getwriter()；出去。write(JSonarr)；出去。flush()；出去。close()；} @ Override protected void doPost(httpersvletrequest req，HttpServletResponse resp)抛出ServletException，IOException { doGet(req，resp)；}}

前台页面

% @ page语言=' Java ' ContentType=' text/html；charset=UTF-8 '页面编码=' UTF-8 ' %！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML hearteta http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 '标题JSON/标题/头体brbr输入类型=' button ' value=' JsonStr ' onclick=' JsonStr()'/brbr table tr tdusername/TD tdinput id=' username '/TD/tr tdid/TD tdinput id=' id '/TD/tr/table brbr输入类型=' button ' value=' JsonArr ' onclick=' JsonArr()'/brbr表格边框颜色=' red '标题JSON Array/标题字符串处理方法函数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('('数据。目标。response text '))；文件。getelementbyid('用户名').value=obj . name document . getelementbyid(' id ').值=obj。id；} };xhr。发送(null)；} //json数组处理方法函数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('('数据。目标。response text '))；//创建代码片段，用于存放表格行var oFragment=document。createdocumentfragment()；//根据json数组长度，产生行数据for(var I=0；iobj . LengTii){ var trObj=document。创建元素(' tr ')；trObj.innerHTML='td' obj[i].名称'/tdtd' obj[i].id '/TD '；ofragment。append child(TRoBj)；} //将行数据添加在表格的tBody部分document.getElementById('tb ').(片段的)appendChild} };xhr。发送(null)；}/脚本/html页面效果图

点击JsonStr和JsonArr按钮后的效果

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

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

以上这篇创建交互式、快速动态网页应用的网页开发技术响应json字符串和json数组的实例（详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。