ajax获取json数据
Ajax（form表单文件上传、请求头之contentType、Ajax传递json数据、。。。
Ajax（form表单⽂件上传、请求头之contentType、Ajax传递json数据、。
form表单⽂件上传上菜file_put.html<form action="" method="post" enctype="multipart/form-data">{# 这⾥必须要请求头格式才能把上传⽂件的对象传过去 enctype="multipart/form-data"#}姓名 <input type="text" name="user">头像 <input type="file" name="head"><input type="submit" ></form>views.pydef file_put(request):if request.method == 'POST':print('post',request.POST) #只有 contenType== urlencoded request 才能拿到这个值print(request.FILES)file_obj = request.FILES.get('head')with open(file_,'wb') as f:for line in file_obj:f.write(line)return HttpResponse('ok')上⾯这个基于form 到表单上传，在传递对象到时候必须要定义请求头格式 nctype="multipart/form-data" 否则传递过来只是⼀个⽂件名称，在服务端接收模版提交的内容必须使⽤ request.FILES 否则拿不到数据，通过创建⽂件句柄，将传递数据循环读取并写⼊⽂件，⽂件名称就是接收⽂件的name值。
关于使用Ajax请求json数据，@RequestMapping返回中文乱码的几种解决办法
关于使⽤Ajax请求json数据，@RequestMapping返回中⽂乱码的⼏种解决办法⼀、问题描述： 使⽤ajax请求json数据的时候，⽆论如何返回的响应编码都是ISO-8859-1类型，因为统⼀都是utf-8编码，导致出现返回结果中⽂乱码情况。
1 $.ajax({2 type:"post",3 url:"http://...",4 data:JSON.stringify(data),5 dataType:"json",6 contentType:"application/json;charset=utf-8",7 success:function(data){8//9 },10 error:function(data){11//12 }13 }) 返回结果类型：⼆、原因： 使⽤了SpringMVC框架的@RequestBody 和 @ResponseBody两个注解，分别完成请求对象到对象响应的过程，⼀步到位，但是因为Spring3.x以后有了HttpMessageConverter消息转换器，把返回String类型的数据编码全部默认转换成iso-8859-1的编码格式，所以就出现了我们遇到的乱码的情况，如返回list或其它则使⽤ MappingJacksonHttpMessageConverter。
三、解决办法： 根据遇到的问题总结了三种可⾏的⽅案： 1.⼿动设置响应的的Content-type属性：1 @RequestMapping(value = "/next_page.action",method = RequestMethod.POST,produces = {"text/html;charset=utf-8"}) 直接设置返回的属性，这样有个不好的地⽅是，每个⽅法都要写⼀次produces，⽐较⿇烦。
json调用方法
json调用方法JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，通常在Web开发中用于数据传输。
在不同的编程语言中，调用JSON的方法会有所不同。
以下是一些使用JSON的基本调用方法，其中以JavaScript为例：###JavaScript中的JSON调用方法：####1.JSON数据的创建与解析：```javascript//创建JSON对象var jsonData={"key1":"value1","key2":"value2"};//将JSON对象转为JSON字符串var jsonString=JSON.stringify(jsonData);//将JSON字符串解析为JSON对象var parsedData=JSON.parse(jsonString);console.log(parsedData.key1);//输出:value1```####2.使用Ajax进行JSON数据的获取：```javascript//使用Ajax获取JSON数据var xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){var jsonResponse=JSON.parse(xhr.responseText);console.log(jsonResponse);}};xhr.open("GET","example.json",true);xhr.send();```####3.在JavaScript中处理JSON数据：```javascript//处理JSON数据function processJSON(data){for(var key in data){if(data.hasOwnProperty(key)){console.log(key+":"+data[key]);}}}//示例调用var jsonData={"name":"John","age":30,"city":"New York"};processJSON(jsonData);```以上代码示例中，`JSON.stringify`用于将JSON对象转换为JSON字符串，而`JSON.parse`则用于将JSON字符串解析为JSON对象。
通过jquery的ajax请求本地的json文件方法
通过jquery的ajax请求本地的json⽂件⽅法⾃⼰学习jquery的ajax的经历，记录⼀下ajaxTestDemo.html在body⾥⾯放⼀个id为test的div<div id="test"></div>第⼀步还是要先加载jquery⽂件 jquery.min.js<script>$(function(){$.ajax({//请求⽅式为gettype:"GET",//json⽂件位置url:"./data/shuju.json",//返回数据格式为jsondataType: "json",//请求成功完成后要执⾏的⽅法success: function(data){//使⽤$.each⽅法遍历返回的数据date,插⼊到id为#result中var str="<ul>";$.each(data.list,function(i,n){str+="<li>"+n["item"]+"</li>";})str+="</ul>";$("#test").append(str);}});});</script>shuju.json⽂件{"list":[{"item":"审计管理"},{"item":"菜单管理"},{"item":"订单管理"},{"item":"合同管理"},{"item":"物流管理"},{"item":"⾏政管理"},{"item":"⼈事管理"},{"item":"购物管理"},{"item":"批发管理"},{"item":"安全管理"},{"item":"账号管理"},{"item":"财务管理"},{"item":"其他管理"}]}/* json⽂件⾥竟然不能有这样的注释，因为困扰了⼏个⼩时！*/完整的页⾯代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试jquey的ajax⽅法</title><style>*{padding:0;margin:0;}#test{padding: 0;margin: 0 auto;width:200px;height: 400px;}#test li{list-style: none;width:200px;text-align: center;height:30px;line-height:30px;border:1px dashed lightgrey;}</style></head><body><div id="test"></div><script src="js/jquery.min.js"></script><script>$(function(){alert(1);$.ajax({//请求⽅式为gettype:"GET",//json⽂件位置url:"./data/shuju.json",//返回数据格式为jsondataType: "json",//请求成功完成后要执⾏的⽅法success: function(data){//使⽤$.each⽅法遍历返回的数据date,插⼊到id为#result中var str="<ul>";$.each(data.list,function(i,n){str+="<li>"+n["item"]+"</li>";})str+="</ul>";$("#test").append(str);}});});</script></body></html>还可以通过$.getJSON来获取本地json⽂件/* getJSON*/$(function(){$.getJSON("./data/shuju.json",function(data){var str="<ul>";$.each(data.list,function(i,n){str+="<li>"+n["item"]+"</li>";})str+="</ul>";$("#test").append(str);});});以上这篇通过jquery的ajax请求本地的json⽂件⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
ajax请求数据（xml和json格式）的方法整理
ajax请求数据（xml和json格式）的⽅法整理1、xml格式的数据数据模型<?xml version="1.0" encoding="UTF-8" ?><root><item><strNowEngineer>dypro001</strNowEngineer><completeNum>3</completeNum><InTreatmentNum>0</InTreatmentNum></item><item><strNowEngineer>dypro002</strNowEngineer><completeNum>4</completeNum><InTreatmentNum>1</InTreatmentNum></item><item><strNowEngineer>dypro003</strNowEngineer><completeNum>5</completeNum><InTreatmentNum>2</InTreatmentNum></item><item><strNowEngineer>dypro004</strNowEngineer><completeNum>6</completeNum><InTreatmentNum>0</InTreatmentNum></item></root>⽅法代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="js/jquery-2.1.4.min.js" type="text/javascript"></script><script>// ajax读取xml格式数据：$(function(){// ⽅法⼀$.ajax({type:"POST",url:"data.xml",dataType:"xml",success:function(data){$(data).find("root").find("item").each(function(i,item){var strNowEngineer=$(item).find("strNowEngineer").text();var completeNum=$(item).find("completeNum").text();var InTreatmentNum=$(item).find("InTreatmentNum").text();$("#datatable").append('<tr><td>'+strNowEngineer+'</td><td>'+completeNum+'</td><td>'+InTreatmentNum+'</td></tr>');})},error:function(){alert("failed");}})// ⽅法⼆$.get('data.xml', function(data) {$(data).find("root").find("item").each(function(i,item){var strNowEngineer =$(item).find("strNowEngineer").text();var completeNum=$(item).find("completeNum").text();var InTreatmentNum=$(item).find("InTreatmentNum").text();$("#datatable").append('<tr><td>'+strNowEngineer+'</td><td>'+completeNum+'</td><td>'+InTreatmentNum+'</td></tr>');})});// ⽅法三var xhr;if(window.XMLHttpRequest){xhr=new XMLHttpRequest();}else{if(widdow.ActiveXObject){xhr=new ActiveXObject("Msxml2.XMLHTTP");}else{xhr=new ActiveXObject("Microsoft.XMLHTTP");}}xhr.open("POST","data.xml",true);xhr.onreadystatechange=function(data){if(xhr.readyState==4 && xhr.status==200){var data=xhr.responseXML;$(data).find("root").find("item").each(function(i,item){var strNowEngineer =$(item).find("strNowEngineer").text();var completeNum=$(item).find("completeNum").text();var InTreatmentNum=$(item).find("InTreatmentNum").text();$("#datatable").append('<tr><td>'+strNowEngineer+'</td><td>'+completeNum+'</td><td>'+InTreatmentNum+'</td></tr>'); })}}xhr.send();})</script></head><body><div class="topnavright" id="top_user"><table id="datatable"></table></div></body></html>2、json格式数据数据模型{"item":[{"strNowEngineer":"dypro001","completeNum":"42","InTreatmentNum":"0"}, {"strNowEngineer":"dypro002","completeNum":"4","InTreatmentNum":"1"}, {"strNowEngineer":"dypro003","completeNum":"5","InTreatmentNum":"2"}, {"strNowEngineer":"dypro004","completeNum":"6","InTreatmentNum":"0"}]}⽅法代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ajax</title><script src="js/jquery-2.1.4.min.js" type="text/javascript"></script><script>$(function(){// ⽅法⼀：$.ajax({type:"POST",url:"data.json",dataType:"json",success:function(data){var json=eval(data.item);$.each(json,function(i,item){var strNowEngineer=item.strNowEngineer;var completeNum=pleteNum;var InTreatmentNum=item.InTreatmentNum;$("#data").append('<tr><td>'+strNowEngineer+'</td><td>'+completeNum+'</td><td>'+InTreatmentNum+'</td></tr>');})alert(result);},error:function(data){alert("failed");}})// ⽅法⼆$.getJSON('data.json', function(data){var json=eval(data.item);$.each(json,function(i,item){var strNowEngineer=item.strNowEngineer;var completeNum=pleteNum;var InTreatmentNum=item.InTreatmentNum;$("#data").append('<tr><td>'+strNowEngineer+'</td><td>'+completeNum+'</td><td>'+InTreatmentNum+'</td></tr>');})});// ⽅法三var xhr;if(window,XMLHttpRequest){xhr=new XMLHttpRequest();if(window.ActiveXObject){xhr=new ActiveXObject("Msxml2.XMLHTTP");}else{xhr=new ActiveXObject("Microsoft.XMLHTTP");}}xhr.open("GET","data.json",true);xhr.onreadystatechange=function(data){if(xhr.readyState==4 && xhr.status==200){var result=xhr.responseText;var json=eval('('+result+')');for(var i=0;i<json.item.length;i++){var strNowEngineer=json.item[i].strNowEngineer;var completeNum=json.item[i].completeNum;var InTreatmentNum=json.item[i].InTreatmentNum;$("#data").append('<tr><td>'+strNowEngineer+'</td><td>'+completeNum+'</td><td>'+InTreatmentNum+'</td></tr>'); }}}xhr.send();})</script></head><body><div class="content"><button type="button" id="datashow">1</button><table id="data"></table></div></body></html>3、json格式数据数据模型{"root": {"item": [{"strNowEngineer": "dypro001","completeNum": "3","InTreatmentNum": "0"},{"strNowEngineer": "dypro002","completeNum": "4","InTreatmentNum": "1"},{"strNowEngineer": "dypro003","completeNum": "5","InTreatmentNum": "2"},{"strNowEngineer": "dypro004","completeNum": "6","InTreatmentNum": "0"}]}}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ajax</title><script src="js/jquery-2.1.4.min.js" type="text/javascript"></script><script>$(function(){// ⽅法⼀：type:"POST",url:"data.json",dataType:"json",success:function(data){var json=eval(data.root.item);$.each(json,function(i,item){var strNowEngineer=item.strNowEngineer;var completeNum=pleteNum;var InTreatmentNum=item.InTreatmentNum;$("#data").append('<tr><td>'+strNowEngineer+'</td><td>'+completeNum+'</td><td>'+InTreatmentNum+'</td></tr>'); })alert(result);},error:function(data){alert("failed");}})// ⽅法⼆$.getJSON('data.json', function(data){var json=eval(data.root.item);$.each(json,function(i,item){var strNowEngineer=item.strNowEngineer;var completeNum=pleteNum;var InTreatmentNum=item.InTreatmentNum;$("#data").append('<tr><td>'+strNowEngineer+'</td><td>'+completeNum+'</td><td>'+InTreatmentNum+'</td></tr>'); })});// ⽅法三var xhr;if(window,XMLHttpRequest){xhr=new XMLHttpRequest();}else{if(window.ActiveXObject){xhr=new ActiveXObject("Msxml2.XMLHTTP");}else{xhr=new ActiveXObject("Microsoft.XMLHTTP");}}xhr.open("GET","data.json",true);xhr.onreadystatechange=function(data){if(xhr.readyState==4 && xhr.status==200){var result=xhr.responseText;var json=eval('('+result+')');for(var i=0;i<json.root.item.length;i++){var strNowEngineer=json.root.item[i].strNowEngineer;var completeNum=json.root.item[i].completeNum;var InTreatmentNum=json.root.item[i].InTreatmentNum;$("#data").append('<tr><td>'+strNowEngineer+'</td><td>'+completeNum+'</td><td>'+InTreatmentNum+'</td></tr>'); }}}xhr.send();})</script></head><body><div class="content"><button type="button" id="datashow">1</button><table id="data"></table></div></body></html>和上⼀个差别：数据格式多了⼀层节点，。
JQuery ajax返回JSON时的处理方式
最近在使用JQuery的ajax方法时，要求返回的数据为json数据，在处理的过程中遇到下面的几个问题，那就是采用不同的方式来生成json数据的时候，在$.ajax方法中应该是如何来处理的，下面依次来进行说明，由于本人使用的是，所以处理的页面都是采用.net来做的！其他的方式应该是相同的吧首先给出要传的json数据：[{"demoData":"This Is The JSON Data"}]1,使用普通的aspx页面来处理本人觉得这种方式处理起来是最简单的了,看下面的代码吧$.ajax({type: "post",url: "Default.aspx",dataType: "json",success: function (data) {$( "input#showTime").val(data[0].demoData);},error: function (XMLHttpRequest, textStatus, errorThrown) {alert(errorThrown);}});这里是后台传递数据的代码Response.Clear();Response.Write( "[{\"demoData\":\"This Is The JSON Data\"}]");Response.Flush();Response.End();这种处理的方式将传递过来的数据直接解析为json数据，也就是说这里的前台js代码可能直接把这些数据解析成json对象数据，而并非字符串数据，如data[0].demoData，这里就直接使用了这个json对象数据2,使用webservice(asmx)来处理这种处理方式就不会将传递过来的数据当成是json对象数据，而是作为字符串来处理的，如下代码$.ajax({type: "post",url: "JqueryCSMethodForm.asmx/GetDemoData",dataType: "json", /*这句可用可不用，没有影响*/contentType: "application/json; charset=utf-8",success: function (data) {$( "input#showTime").val(eval('(' + data.d + ')')[0].demoData);//这里有两种对数据的转换方式，两处理方式的效果一样//$("input#showTime").val(eval(data.d)[0].demoData);},error: function (XMLHttpRequest, textStatus, errorThrown) {alert(errorThrown);}});下面这里为asmx的方法代码[WebMethod]public static string GetDemoData() { return"[{\"demoData\":\"This Is The JSON Data\"}]";}这里的这种处理方式就把传递回来的json数据当成了字符串来处理的，所在就要对这个数据进行eval的处理，这样才能成为真正的json对象数据，3,使用ashx文件来处理这种方式和普通的aspx的页面处理是一样的所以这里就不多做解释了！本文由淄博SEO()，淄博网站优化()整理发布，转载请注明出处。
jQuery中ajax请求后台返回json数据并渲染HTML的方法
jQuery中ajax请求后台返回json数据并渲染HTML的⽅法html实例<table border="0" class="restaurant_food" cellspacing="0" cellpadding="1"><input type="text" name="dishes" value="" class="seek_product" placeholder="请输⼊菜名"/><button type='button' class="btn_nor" onclick="seek_product()">搜索</button><tr><th width="30%">序号</th><th width="70%">菜名</th></tr><tr data-id=""><td></td><td class="tl"> <p></p></td></tr></table>jquery实例function seek_product(){var product = $('.seek_product').val();$.ajax({type:'get',url:'/Cash/Index/seek_product',data:{name:product},success:function(res){var data = eval('('+res+')');var len = data.length;var cm = "";if(len > 0){for(var i = 0; i < len; i++){cm += '<tr data-id='+data[i]['id']+'>';cm += '<td>';cm += i+1;cm += '</td>';cm += '<td class="tl">';cm += '<p>'+data[i]["name"]+'</p>';cm += '</td>';cm += '</tr>';console.log(cm);$('.restaurant_food').html(cm);}}else{$('.restaurant_food').html('抱歉，没有这道菜！');}}})}php实例//搜索菜public function seek_product(){$shop_id = session("cashShopId");$name = I('');$map['name'] = array('like','%'.$name.'%');$map['shop_id'] = $shop_id;$map['status'] = 1;$productList = M('product')->field('id,name')->where($map)->select();echo json_encode($productList);}以上这篇jQuery中ajax请求后台返回json数据并渲染HTML的⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
jQuery通过ajax⽅法获取json数据不执⾏success的原因及解决⽅法1.jquery通过ajax⽅法获取json数据不执⾏success回调问题描述：jquery通过ajax⽅法获取json数据不执⾏success回调⽅法问题原因：json格式存在问题或不符合标准写法，导致总是执⾏error回调⽅法解决⽅案：使json格式务必符合下述3个标准写法： 1）键名称：⽤双引号括起； 2）字符串：⽤双引号括起； 3）数字，布尔值不需要使⽤双引号括起；注意：⼀定是双括号！2.jQuery中ajax使⽤json数据类型总是跳过success执⾏error语句执⾏函数error : function(XMLHttpRequest, textStatus, errorThrown) {//这个error函数调试时⾮常有⽤，如果解析不正确，将会弹出错误框 alert(XMLHttpRequest.responseText);alert(XMLHttpRequest.status);alert(XMLHttpRequest.readyState);alert(textStatus); // parser error;}就明⽩错误信息了；弹出的框⾥显⽰：<!DOCTYPE html PUBLIC "-//W3C //DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD /xhtml1-transitional.dtd">以及<?xml version="1.0" encoding="gb2312" ?>这两句话，虽然不清楚为什么，我删除之后，就成功执⾏ success了3.$.ajax()中的URL跨域时，总是不执⾏success，⽼进⼊error1）我加上ServletActionContext.getResponse().setHeader("Access-Control-Allow-Origin", "*");解决跨域问题，就顺利进⼊success了2）dataType:"json",去掉看能进success 不。
ajax获取json数据为undefined原因分析
ajax获取json数据为undefined原因分析Asynchronous JavaScript and XML (Ajax ) 是驱动新⼀代 Web 站点（流⾏术语为 Web 2.0 站点）的关键技术。
Ajax 允许在不⼲扰 Web 应⽤程序的显⽰和⾏为的情况下在后台进⾏数据检索。
使⽤ XMLHttpRequest 函数获取数据，它是⼀种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。
Ajax 也是许多 mashup 的驱动⼒，它可将来⾃多个地⽅的内容集成为单⼀Web 应⽤程序。
⼀般处理服务器传来的json值时，我们都会⽤两种⽅式进⾏处理：1.⼀种为使⽤eval()函数。
var dataObj=eval("("+data+")");//转换为json对象（注：data为json数据）；2. 使⽤Function对象来进⾏返回解析。
var json =(new Function("","return "+data))();但是今天做项⽬（项⽬⽤struts2）时⽤这两种⽅法进⾏json读取，输出时⼀直是undefined。
上⽹查了许多资料，⼤多都说不明⽩，后来查到⼀篇⽂章作者也遇到这种情况，他解决的办法是在action中将返回值声明json属性，在⾃⼰的项⽬上测试后不通过，后来解决的办法是再转⼀次。
以下是⾃⼰的思考：从后台传来的数据虽然声明为json属性，但是传到前台时其实还是⼀个字符串，不是⼀个json对象，这时候我们需要对后台的数据进⾏处理，转化为json对象，然后获取json中的值。
但是有时候后台传来的值不⼀定是标准的json格式的字符串，虽然我们通过前⾯的两种⽅法之⼀转化后台传来的对象，但是这时候转化的json对象实际上还是⼀个字符串，是⼀个标准的json字符串，我们再⼀次转换后就成了⼀个json对象。
jQueryajax读取本地json文件的实例
jQueryajax读取本地json⽂件的实例json⽂件{"first":[{"name":"张三","sex":"男"},{"name":"李四","sex":"男"},{"name":"王武","sex":"男"},{"name":"李梅","sex":"⼥"}]}js：⽅法⼀：$.ajax({url: "ceshi.json",//json⽂件位置type: "GET",//请求⽅式为getdataType: "json", //返回数据格式为jsonsuccess: function(data) {//请求成功完成后要执⾏的⽅法//each循环使⽤$.each⽅法遍历返回的数据date$.each(data.first, function(i, item) {var str = '<div>姓名:' + + '性别：' + item.sex + '</div>';document.write(str);})}})⽅法⼆：jQuery.getJSON()是jQuery.ajax()函数的简写形式// jQuery.getJSON( url [, data ] [, success ] )$.getJSON("ceshi.json", "", function(data) { //each循环使⽤$.each⽅法遍历返回的数据date$.each(data.first, function(i, item) {var str = '<div>姓名:' + + '性别：' + item.sex + '</div>';document.write(str);})});以上这篇jQuery ajax读取本地json⽂件的实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
ajax请求base64加密后的json数组，并通过vue的v-for遍历输出
ajax请求base64加密后的json数组，并通过vue的v-for遍历输出⼀、当json数据使⽤base64加密后，ajax⽆法直接请求加密后的字符串密⽂，需要⽤数组包裹密⽂ 原始json数组内部数据： 备注：原始json本来是⽤放在⼀个数组内部的[{"a":"b","c":"d"},{"e":"f","g":"h"}]{"ImgName":"MITSUBISHI","url":"url(\"/Template/xpshop_currents/Images/logo/MITSUBISHI.png\")"},{"ImgName":"NOK","url":"url(\"/Template/xpshop_currents/Images/logo/NOK.png\")"} 原始密⽂：eyJJbWdOYW1lIjoiTUlUU1VCSVNISSIsInVybCI6InVybChcIi9UZW1wbGF0ZS94cHNob3BfY3VycmVudHMvSW1hZ2VzL2xvZ28vTUlUU1VCSVNISS5wbmdcIikifSx7IkltZ05hbWUiOiJOT0siLCJ1cmwiOiJ1cmwoXCIvVGVtcGxhdGUveHBzaG9wX2 数组包裹密⽂后：["eyJJbWdOYW1lIjoiTUlUU1VCSVNISSIsInVybCI6InVybChcIi9UZW1wbGF0ZS94cHNob3BfY3VycmVudHMvSW1hZ2VzL2xvZ28vTUlUU1VCSVNISS5wbmdcIikifSx7IkltZ05hbWUiOiJOT0siLCJ1cmwiOiJ1cmwoXCIvVGVtcGxhdGUveHBzaG9wX ⼆、请求到了json数据后，需要对数据进⾏解码window.btoa //base64加密window.atob //base64解码如果密⽂中有中⽂数据，还需要进⾏再次编码解码，否则会出现中⽂乱码escape(）//编码decodeURIComponent（）//解码三、解码后的明⽂是字符串String,需要提前字符串数据，并转换为数组let pat1 = /\[(.*?)]/;let pat2 = /},/g;let pat3 = /;/; //⽤正则pat1，匹配原始json内容，并通过split把匹配出来的内容变成数组元素，并通过下标获取let sp = spdata.split(pat1)[0]; //⽤正则pat2，replace将符合条件的逗号替换为分号，⽅便等下分割提取数组元素，注意正则尾部加g，启⽤全局匹配let spp = sp.replace(pat2,'};');//⽤正则pat3，split按分号将字符串切割成数组，注意此时的数组内容依然是字符串Stringlet ImgUrlArrOld = spp.split(pat3);四、JSON.parse将提取出来的数组元素转换为对象（Object）格式，并将数组随机重排let strToObj = JSON.parse(str)//字符串转对象let objToStr = JSON.stringify(obj)//对象转字符串//⽣成随机数组let ImgUrlArr = new Array();while(ImgUrlArr.length<ImgUrlArrOld.length){let num = ImgUrlArrOld[Math.floor(Math.random() * ImgUrlArrOld.length)];if (ImgUrlArr.indexOf(num)<0) {ImgUrlArr.push(num);}} //数组内容对象化for (let i = 0; i < ImgUrlArr.length; i++) {ImgUrlArr[i] = JSON.parse(ImgUrlArr[i]);};完整代码：html: <div id="appVue"><ul class="img-ul" id="ImgUl"><!-- 遍历背景图⽚地址和title,并设置背景图⽚样式 --><li class='img-ul-li' v-for='src in src' v-bind:title='src.ImgName' :style='{background: src.url,"background-repeat": backgroundRepeat,"background-position": backgroundPosition,"background-size":backgroundSize}'></li></ul></div>js:$.ajax({type: 'get',dataType: 'json',url: '/Template/xpshop_currents/inc/imgUrl.json',cache: false,success: function (data) { //window.atob()base64解码，escape编码，decodeURIComponent解码，这⾥是为了解决base64解码后的中⽂乱码问题let spdata = decodeURIComponent(escape(window.atob(data[0])));let pat1 = /\[(.*?)]/;let pat2 = /},/g;let pat3 = /;/; //因为json数组加密后变成了⼀串字符串，所以json数据⽤另外⼀个数组包裹了加密后的字符串，否则json资源⽆法加载，这⾥先通过pat1的正则把字符串提取出来let sp = spdata.split(pat1)[0]; //将逗号替换为分号，这样⽅便等下分割提取数组元素let spp = sp.replace(pat2,'};');let ImgUrlArrOld = spp.split(pat3);//⽣成随机数组let ImgUrlArr = new Array();while(ImgUrlArr.length<ImgUrlArrOld.length){let num = ImgUrlArrOld[Math.floor(Math.random() * ImgUrlArrOld.length)]; if (ImgUrlArr.indexOf(num)<0) {ImgUrlArr.push(num); }} //数组内容对象化 for (let i = 0; i < ImgUrlArr.length; i++) { ImgUrlArr[i] = JSON.parse(ImgUrlArr[i]); };let vm = new Vue({el:'#appVue',data:{src:ImgUrlArr,backgroundRepeat: 'no-repeat',backgroundPosition: 'center',backgroundSize: '100% 100%',},// 加载函数methods:{ImgInfiniteRolling: function(){ImgInfiniteRolling(-200,1)},},//页⾯模板加载完成后调⽤函数mounted(){this.ImgInfiniteRolling()}})}}) function ImgInfiniteRolling(begin,speed){ console.log(begin,speed); }。
Jquery中$.get（）,$.post（）,$.ajax（）,$.getJSON（）的用法总结
Jquery中$.get（）,$.post（）,$.ajax（）,$.getJSON（）的⽤法总结详细解读Jquery各Ajax函数：$.get(),$.post(),$.ajax(),$.getJSON()⼀，$.get(url,[data],[callback])说明：url为请求地址，data为请求数据的列表，callback为请求成功后的回调函数，该函数接受两个参数，第⼀个为服务器返回的数据，第⼆个参数为服务器的状态，是可选参数。
⽽其中，服务器返回数据的格式其实是字符串形势，并不是我们想要的json数据格式，在此引⽤只是为了对⽐说明复制代码代码如下:$.get("data.php",$("#firstName.val()"),function(data){$("#getResponse").html(data); }//返回的data是字符串类型);⼆，$.post(url,[data],[callback],[type])说明：这个函数跟$.get()参数差不多，多了⼀个type参数，type为请求的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么返回的格式则是json格式的，如果没有设置，就和$.get()返回的格式⼀样，都是字符串的复制代码代码如下:$.post("data.php",$("#firstName.val()"),function(data){$("#postResponse").html();},"json"//设置了获取数据的类型，所以得到的数据格式为json类型的);三，$.ajax(opiton)说明：$.ajax()这个函数功能强⼤，可以对ajax进⾏许多精确的控制，需要详细说明的请参照相关资料复制代码代码如下:$.ajax({url: "ajax/ajax_selectPicType.aspx",data:{Full:"fu"},type: "POST",dataType:'json',success:CallBack,error:function(er){BackErr(er);}});四，$.getJSON(url,[data],[callback])复制代码代码如下:$.getJSON("data.php",$("#firstName.val()"),function(jsonData){$("#getJSONResponse").html(jsonData.id);}//⽆需设置，直接获取的数据类型为json，所以调⽤时需要使⽤jsonData.id⽅式);When Ajax meets jQuery 基于AJAX的应⽤现在越来越多，⽽对于前台开发⼈员来说，直接和底层的HTTPRequest打交道⼜不是⼀件令⼈愉快的事情。
jQuery中$.ajax解析xml、json格式数据
jQuery中$.ajax解析xml、json格式数据$.ajax()方法参数详解：url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。
注意：这个要访问url必须与js文件在同一个域，否则会报错。
type: 要求为String类型的参数，请求方式（post或get）默认为get。
注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。
此设置将覆盖$.ajaxSetup()方法的全局设置。
async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。
如果需要发送同步请求，请将此选项设置为false。
注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。
设置为false将不会从浏览器缓存中加载请求信息。
data: 要求为Object或String类型的参数，发送到服务器的数据。
如果已经不是字符串，将自动转换为字符串格式。
get请求中将附加在url后。
防止这种自动转换，可以查看processData选项。
对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。
如果是数组，jQuery将自动为不同值对应同一个名称。
例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
dataType: 要求为String类型的参数，预期服务器返回的数据类型。
如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。
三种获取数据的方法fetch和ajax和axios
三种获取数据的⽅法fetch 和ajax 和axios⼀ .fetch ⽤法( 本⼈⽐较喜欢fetch,代码精简,虽说⽬前axios ⽐较流⾏,但是fetch 很多⼤⼚已经开始⽤fetch 开始封装了, 我觉得以后fetch 会取代axios 和ajax )1、第⼀个参数是URL2、第⼆个参数可选参数 可以控制不同的init 对象3、使⽤了js 中的promise 对象fetch 号称是AJAX 的替代品，是在ES6出现的，使⽤了ES6中的promise 对象。
Fetch 是基于promise 设计的。
Fetch 的代码结构⽐起ajax 简单多了，参数有点像jQuery ajax 。
但是，⼀定记住fetch 不是ajax 的进⼀步封装，⽽是原⽣js ，没有使⽤XMLHttpRequest 对象。
fetch 的优点：1.符合关注分离，没有将输⼊、输出和⽤事件来跟踪的状态混杂在⼀个对象⾥2.更好更⽅便的写法坦⽩说，上⾯的理由对我来说完全没有什么说服⼒，因为不管是Jquery 还是Axios 都已经帮我们把xhr 封装的⾜够好，使⽤起来也⾜够⽅便，为什么我们还要花费⼤⼒⽓去学习fetch ？我认为fetch 的优势主要优势就是： //get fetch('/mock/xxxxx').then(res => {console.log(res)//是⼀个综合各种⽅法的对象，并不是请求的数据 和axios 的区别(fetch 的返回值是⼀个promise 对象) if(res.ok){ res.json().then(data=>{ console.log(data) //json 数据 和axios 的区别 }) }}).catch(err => {console.log(err)})//postconst arr1 = [{name: "haha",detail:"123"}];fetch("url", {method: "post",credentials: "include",//默认为omit,忽略的意思，也就是不带cookie 还有两个参数，same-origin ，意思就是同源请求带cookie ；include,表⽰⽆论跨域还是同源请求都会带cookieheaders: {//设置请求的头部信息"Content-Type": "application/json", //因为⼀般使⽤JSON 数据格式，所以设置ContentType 为application/json , //表单 'application/x-www-form-urle ncoded"Accept":"allication/json"}, //将arr1对象序列化成json 字符串body: JSON.stringify(arr1)//向服务端传⼊json 数据}).then(res) {console.log(res)//是⼀个综合各种⽅法的对象，并不是请求的数据 和axios 的区别 if(res.ok){ res.json().then(data=>{ console.log(data) //json 数据 和axios 的区别 }) }}).catch(err => { console.log(err)})1. 语法简洁，更加语义化2. 基于标准 Promise 实现，⽀持 async/await3. 同构⽅便，使⽤ [isomorphic-fetch](https:///matthew-andrews/isomorphic-fetch)4.更加底层，提供的API 丰富（request, response ）5.脱离了XHR ，是ES 规范⾥新的实现⽅式⼆. axios和fetch的区别axios("http://xxx/xxx.json？a=123'").then((res)=>{console.log(res)//这⾥的res是响应结果})fetch("").then((res)=>{console.log(res);//是⼀个综合各种⽅法的对象(fetch的返回值是⼀个promise对象)，并不是请求的数据 还需要res.json().then(data=>{}})axios :1、从浏览器中创建 XMLHttpRequest2、从 node.js 发出 http 请求3、⽀持 Promise API4、拦截请求和响应5、转换请求和响应数据6、⾃动转换JSON数据7、客户端⽀持防⽌CSRF/XSRFfetch:符合关注分离，没有将输⼊、输出和⽤事件来跟踪的状态混杂在⼀个对象⾥, 更加底层，提供的API丰富（request, response）, 脱离了XHR，是ES规范⾥新的实现⽅式 1、fetchtch只对⽹络请求报错，对400，500都当做成功的请求，需要封装去处理 2、fetch默认不会带cookie，需要添加配置项 3、fetch不⽀持abort，不⽀持超时控制，使⽤setTimeout及Promise.reject的实现的超时控制并不能阻⽌请求过程继续在后台运⾏，造成了量的浪费 4、fetch没有办法原⽣监测请求的进度，⽽XHR可以 5、fetch的返回值是⼀个promise对象三 .ajax和fetch的区别：（1）、ajax是理⽤XMLHttpRequest对象来请求数据的，⽽fetch是window的⼀个⽅法（2）、ajax基于原⽣的XHR开发，XHR本⾝的架构不清晰，已经有了fetch的替代⽅案（3）、fetch⽐较与ajax有着更好更⽅便的写法（4）、fetch只对⽹络请求报错，对400，500都当做成功的请求，需要封装去处理（5）、fetch没有办法原⽣监测请求的进度，⽽XHR可以因为它原⽣的写法很鸡肋，所以⼤多会封装下，导致可能很多⼈不会⾃⼰写个ajax请求。
基于jQuery的AJAX和JSON的实例
基于jQuery的AJAX和JSON的实例通过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。
我们先来看一下html模板：<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse"><tr><th>订单ID</th><th>客户ID</th><th>雇员ID</th><th>订购日期</th><th>发货日期</th><th>货主名称</th><th>货主地址</th><th>货主城市</th><th>更多信息</th></tr><tr id="template"><td id="OrderID"></td><td id="CustomerID"></td><td id="EmployeeID"></td><td id="OrderDate"></td><td id="ShippedDate"></td><td id="ShippedName"></td><td id="ShippedAddress"></td><td id="ShippedCity"></td><td id="more"></td></tr></table>一定要注意的就是里面所有的id属性，这个是一个关键。
使用Ajax获取本地json数据
使⽤Ajax获取本地json数据⼀、使⽤原⽣ajax获取本地JSON⽂件中的数据1）创建json数据⽂件，⽂件名：demo.jsontext.json内的数据代码如下：{"person":{"name":"tom","age":18}}2）HTML⽂档中的代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>index</title></head><body><script>var xhr="";//声明变量容纳XMLHttpRequest对象//封装XMLHttpRequest对象创建⽅法（⽤于兼容低版本IE浏览器）function createXHR(){if(new window.XMLHttpRequest){//如果浏览器⽀持对象XMLHttpRequestxhr=new XMLHttpRequest();}else{xhr=new ActiveXObject("Microsoft.XMLH");//低版本IE使⽤ActiveXObject}}createXHR();//调⽤函数以创建XMLHttpRequest对象//使⽤XMLHttpRequest对象发送请求xhr.open("get","./demo.json",false);//创建请求xhr.send(null);//发送请求//获取返回的json数据，var personStr=xhr.responseText;//返回的数据都是字符串，不具备对象⽅法var per=JSON.parse(personStr);//使⽤JSON.parse⽅法将字符串数据转换为javascript对象console.log()//tom</script></body></html>⼆、使⽤Ajax获取本地json⽂件中的数据（注：使⽤jquery获取json中的数据，不需要再使⽤JSON.parse()将数据转为javascript对象）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>index</title><script src="/ajax/jquery/jquery-1.8.0.js"></script></head><body><script>$(document).ready(function(){$.ajax({type: "get",//请求类型datatype: "json",//数据类型url: "./demo.json",//向哪⾥请求success: function(data){//请求成功后执⾏该函数console.log()//tom}})})</script></body></html>另、获取HTML⽂档内部的JSON数据<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>index</title></head><body><script>var jsonData='{"name": "tom","age": 18}';//创建json数据var per=JSON.parse(jsonData);//将json数据转换为javascript对象console.log()//tom</script></body></html>。
yii2使用ajax返回json的实现方法
yii2使用ajax返回json的实现方法Yii2 是一款快速、安全、专业的 PHP 框架，它提供了丰富的功能和工具，方便我们开发高效的 Web 应用程序。
在 Yii2 中，我们可以使用AJAX 技术实现动态加载数据，并返回 JSON 格式的数据给前端。
以下是一种使用 Yii2 实现 AJAX 返回 JSON 的方法：1. 添加 jQuery 库首先，需要在我们的页面中添加 jQuery 库，Yii2 中默认已经包含了 jQuery 文件，我们只需要在需要使用 AJAX 的页面中引入该文件即可，例如：```phpuse yii\web\YiiAsset;$this->title = 'My Page';YiiAsset::register($this);```2.创建控制器我们需要创建一个控制器来处理AJAX请求，并返回JSON数据。
首先，我们可以使用 Yii2 的自动生成命令来生成控制器。
在终端中进入项目根目录，输入以下命令：```bashphp yii gii/controller --controllerClass=AjaxController```这将为我们生成一个名为 AjaxController 的控制器，并自动在`controllers` 目录下创建相应的文件。
3.编写控制器逻辑在生成的 AjaxController 文件中，我们可以编写处理 AJAX 请求的逻辑。
例如，我们可以创建一个 action 来处理一些 AJAX 请求，并返回JSON 数据。
```phpnamespace app\controllers;use yii\web\Controller;class AjaxController extends Controllerpublic function actionGetUserDataif (\Yii::$app->request->isAjax)// 通过 Ajax 请求获取用户数据$userId = \Yii::$app->request->post('userId');$user = User::findOne($userId);// 设置 response 格式为 JSON\Yii::$app->response->format =\yii\web\Response::FORMAT_JSON;//返回JSON数据return'success' => true,'user' => $user,];}//处理非AJAX请求throw new \yii\web\BadRequestHttpException('Invalid request.');}```在上面的代码中，我们首先判断请求是否为 AJAX 请求（通过`\Yii::$app->request->isAjax`），然后从请求中获取到用户的 ID，查询用户数据，最后将数据以 JSON 格式返回（通过设置 `\Yii::$app->response->format`）。
Vue之使用ajax获取json数据，并用v-for循环显示在表格中
Vue之使⽤ajax获取json数据，并⽤v-for循环显⽰在表格中运⾏的时候，出现了php跨域问题，解决办法是在php的头⽂件中添加了如下代码：header('Content-Type: application/json');header('Content-Type: text/html;charset=utf-8');header('Access-Control-Allow-Origin:*');header('Access-Control-Allow-Methods:*');header('Access-Control-Allow-Headers:x-requested-with,content-type');⽬的：在vue中获取从ajax获取的json数据，并⽤v-for循环显⽰在表格中效果如下：html⽰例代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script><script src="jquery.min.js"></script><style>* {padding: 0;margin: 0;}table {margin: 100px auto;border: 1px solid #000;border-collapse: collapse; /*设置表格的边框是否被合并为⼀个单⼀的边框*/border-spacing: 0; /*设置相邻单元格的边框间的距离*/}tr {width: 300px;height: 50px;line-height: 50px;border-bottom: 1px solid #000;background-color: pink;}td, th {width: 99px;height: 50px;line-height: 50px;text-align: center;border-right: 1px solid #000;}</style></head><body><div id="app"><table><thead><tr><th>姓名</th><th>年龄</th><th>住址</th></tr></thead><tbody><tr v-for="site in sites"><td v-text=""></td><td v-text="site.age"></td><td v-text="site.address"></td></tr></tbody></table></div></body></html><script>new Vue({el: '#app',data: {sites: []},created: function () { //为了在内部函数能使⽤外部函数的this对象，要给它赋值了⼀个名叫self的变量。
js实现ajax获取的文件base64字符串处理.md
js实现ajax获取的⽂件base64字符串处理.md 需求介绍前端通过ajax调⽤java的接⼝获取到json字符串，在通过js处理获取到的json字符串将⽂件内容展⽰在页⾯上，同时可以对⽂件下载。
Java后端代码/*** 获取⽂件内容* @return*/public String getFileContent() {Map<String, Object> fileMap = new HashMap<>();fileMap.put("fileName", zsFiles.get(0).getAttachFileName());//获取⽂件流InputStream is = fileAttachService.getAttachStorageDetail(zsFiles.get(0).getAttachGuid()).getContent();if (is == null) {fileMap.put("fileContent", "");return JsonUtil.controlsToJson(fileMap);}//获取⽂件流byte[] fileBuff = null;try {fileBuff = this.inputStreamToByteArray(is);if (is != null) {is.close();}} catch (IOException e) {e.printStackTrace();}fileMap.put("fileContent", Base64.encodeBase64String(fileBuff));return JsonUtil.controlsToJson(fileMap);}/*** 输⼊流转字节数组* @param input* @return* @throws IOException*/private byte[] inputStreamToByteArray(InputStream input) throws IOException {ByteArrayOutputStream output = new ByteArrayOutputStream();byte[] buffer = new byte[1024];int n = 0;while (-1 != (n = input.read(buffer))) {output.write(buffer, 0, n);}return output.toByteArray();}前端html代码<div><input id="tmpData" type="hidden"/><a id="downloadLink" href="javascript:downloadDoc()">⽂件下载</a></div><div id="canvas_list"></div>前端js代码pdf预览使⽤，前端需要引⼊pdf.js⽂件<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>var testFile = function() {$.ajax({url: "getFileContent",type: "post",data: '',dataType: "json",cache: false}).success(function(msg) {var jsonArray = $.parseJSON(msg.custom);var fileName = jsonArray.fileName;var fileData = jsonArray.fileContent;// 隐藏域，附件信息$("#downloadLink").html(fileName);$("#tmpData").val(fileData);console.log(jsonArray);console.log("---------------------");//调⽤showPdf1(fileData);});};//base64字符串转arrayvar base64ToUint8Array = function(base64String) {const padding = '='.repeat((4 - base64String.length % 4) % 4);const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');const rawData = window.atob(base64);const outputArray = new Uint8Array(rawData.length);for (let i = 0; i < rawData.length; ++i) {outputArray[i] = rawData.charCodeAt(i);}return outputArray;}// pdf的base64数据解码预览var showPdf1 = function(pdfData) {//base64字符串解码pdfData = atob(pdfData);//通过脚本标签加载，创建pdf导出⽅式var pdfjsLib = window['pdfjs-dist/build/pdf'];//配置 workerSrcpdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';var loadingTask = pdfjsLib.getDocument({data: pdfData});loadingTask.promise.then(function(pdf) {console.log('PDF loaded');//总页数var pageNums = pdf.numPages;console.log(pageNums);// 加载pdf页⾯数据for (var pageNum = 1; pageNum <= pageNums; pageNum ++) {renderPage(pdf, pageNum);}}, function (reason) {// PDF loading errorconsole.error(reason);});};//渲染pdf页⾯数据var renderPage = function(pdfDoc, num) {// Using promise to fetch the pagepdfDoc.getPage(num).then(function(page) {var canvasList = document.getElementById('canvas_list');var canvas = document.createElement('canvas');canvasList.appendChild(canvas);var scale = 1.5;var viewport = page.getViewport({scale: scale});// Prepare canvas using PDF page dimensions//var canvas = document.getElementById('the-canvas');var context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;// Render PDF page into canvas contextvar renderContext = {canvasContext: context,viewport: viewport};var renderTask = page.render(renderContext);renderTask.promise.then(function () {console.log('Page rendered');});});}// 下载⽂件⽅法var downloadDoc = function() {var fileName = $("#downloadLink").html();var fileData = $("#tmpData").val();var content = base64ToUint8Array(fileData);var eleLink = document.createElement('a');eleLink.download = fileName;eleLink.style.display = 'none';// 字符内容转变成blob地址var blob = new Blob([content]);eleLink.href = URL.createObjectURL(blob);// ⾃动触发点击document.body.appendChild(eleLink);eleLink.click();// 然后移除document.body.removeChild(eleLink);};结果展⽰页⾯预览结果。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
// var txt = JSON.stringify(json);
// alert(txt);
});
});
</script>
</body>
</html>
//---------------------------------------------------------------------------------------
/**
*index_do.php;
*mysql数据库：myerp;
*表：user;
*/
<?php
header("content-type:text/html;charset=utf-8");
$conn = mysql_connect("localhost","root","sa");
//通过ajax获取json格式数据。index.php显示数据；index_do.php处理数据；
/**
*index.php;
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
$res[]=$row;
}
// var_dump($res);
$d = json_encode($res);
echo $d;
mysql_select_db("myerp",$conn);
$sql = "select department,username from user";
$query = mysql_query($sql);
while($row = mysql_fetch_assoc($query)){
</head>
<body>
<div style="background: #ccc;height: 300px;">
<table id="demo" rules=all style="background: #ccc;border:1px solid red;">
<tr>
<td>部门</td><td>姓名</td>
</tr>
</table>
</div>
<p id="test">获取数据</p>
<script src="/Public/js/jquery.min.js"></script> <scFra bibliotekipt>
$(function(){
$("#test").click(function(){
$.post("index_do.php",function(data){
//document.write(data);
var jsonstr = '';
//var json = eval("("+data+")");
var json = JSON.parse(data);
$.each(json,function(i,item){
jsonstr += "<tr><td>"+item.department+"</td><td>"+ername+"</td></tr>";
});
$("#demo").html(jsonstr);