jsp已经获得了json，怎样用js将它展现在html里 js获取的json数据怎么展现再jsp页面上
jsp\u5df2\u7ecf\u83b7\u5f97\u4e86json\uff0c\u600e\u6837\u7528js\u5c06\u5b83\u5c55\u73b0\u5728html\u91cc\u80fd\u53d6\u51fa\u6765\u5bf9\u8c61\u7684\u8bdd\uff0c\u771f\u63a5\u70b9\u5c31\u53ef\u4ee5\u4e86\uff01
records.\u96c6\u5408\u4e2d\u5bf9\u8c61\u7684\u5c5e\u6027
\u6bd4\u5982
records.name
\u5faa\u73af\u7684\u8bdd
${temprec.\u5c5e\u6027\u540d\u5b57}
${temprec.name}
\u5355\u8bcd\u5fd8\u4e86\u600e\u4e48\u5199\u4e86\uff0c\u4f60\u70b9\u4e0b\u81ea\u52a8\u5c31\u51fa\u6765\u4e86\uff0c\u8981\u5f15\u5165TL\u6807\u7b7e\u5e93
\u6709\u4e24\u79cd\u65b9\u6cd5\uff0c\u4e00\u79cd\u662f$.ajax(option)\u65b9\u6cd5\uff0c\u4e00\u79cd\u662f$.getJSON()\u65b9\u6cd5\u3002
\u5b9e\u4f8b\uff1a
\u4e00\u3001\u6570\u636e\u96c6\u6240\u5728jsp\u9875\u9762out.jsp,\u4ee3\u7801\u5982\u4e0b
<%@page contentType="text/plain; charset=UTF-8"
language="java"
import="java.io.*,java.net.*,java.util.*"
buffer="8kb"
session="false"
autoFlush="true"
%>
<%
String jsonData="{data:[{id:200901,name:'name1'},{id:200902,name:'name2'},{id:200903,name:'\u59d3\u540d3'},{id:200904,name:'\u59d3\u540d4'},{id:200905,name:'\u59d3\u540d5'}]}";
//out.clear();
out.write(jsonData);
%>
\u4e8c\u3001js\u5904\u7406\u9875\u9762
(1)
test
function getOut(){
var s='';
$.ajax({
type:'get',//\u8bf7\u6c42\u65b9\u5f0f
url:'out.jsp?id='+Math.random(), // AJAX HTTP\u8bf7\u6c42\u63a5\u53e3
data:'',//\u63d0\u4ea4\u5230\u670d\u52a1\u5668\u63a5\u53e3\u7684\u53c2\u6570 \u6bd4\u5982'{cid:0405}'\uff0c\u7ed3\u679c\u4e3aout.jsp?cid=0405\u683c\u5f0f
dataType:'json',//\u8bf7\u6c42\u7c7b\u578b\u4e3ajson, \u66f4\u591a\u89c1jquery doc\u6587\u6863
timeout:7000,//\u8bf7\u6c42\u8d85\u65f6\u540e\u505c\u6b62\u8bf7\u6c42
success: function(json){
var d=json.data;
$.each(d,function(i){
s+=('id:'+d[i].id +' | name:'+d[i].name+'
');
});
$('#out').html(s);}});
}
(2)
function showStudent(){
var s='';
$.getJSON("out.jsp?id="+Math.random(),function(json){
var d=json.data;
for(var i=0;i<d.length;i++){
s+=('
id:'+d[i].id +' | name:'+d[i].name+'');
}
$('#content').html(s);
});
}
\u603b\u7ed3\uff1a
\uff081\uff09\u6709\u65f6\u5019\u603b\u662f\u51fa\u73b0\u9519\u8bef\uff0c\u539f\u56e0\u5728\u4e8e\u2014\u2014json\u6570\u636e\u683c\u5f0f\u6709\u95ee\u9898\uff0c\u524d\u7aef$.getJSON()\u65b9\u6cd5\u5e76\u6ca1\u6709\u4ec0\u4e48\u9519\u8bef\u3002
\uff082\uff09\u76f8\u5bf9\u6765\u8bf4\uff0c$ajax(option)\u65b9\u6cd5\u4f7f\u7528\u6bd4\u8f83\u7075\u6d3b\uff0c\u53ef\u4ee5\u7528\u5728\u6bd4\u8f83\u590d\u6742\u7684\u60c5\u51b5\u3002
这样就可以将json解析成一个数组。e.g. var record = eval(jsonStr);
你可以写一个for循环，来遍历record；
比如你的json里面有name和age属性，那么在for循环中，你可以使用record[i].name取得name的值。
导入Json的js文件，用JSON.parse(str);
绛旓細浣犳槸瑕佹妸json鏁版嵁璧嬬粰涓涓璞″悧锛屽鏋滄槸鐨勮瘽浣犲彲浠ヨ繖鏍 eval('json='+response.responseText+';');杩欓噷鐨剅esponse.responseText灏辨槸杩斿洖鐨刯son瀛楃涓诧紝瀹冭杞崲鎴愬璞¤祴缁浜唈son鍙橀噺銆備綘鐓х潃杩欎釜澶勭悊涓涓嬶紝鍥犱负瀵筳Query鐨刟jax涓嶇啛锛屼笂闈㈢殑鏄紶缁熷仛娉曪紝濡傛灉浣犵殑json灏辨槸杩斿洖鐨勫瓧绗︿覆鐨勮瘽锛屽氨鍔犱笂杩欎袱鍙...
绛旓細鍦jsp椤甸潰涓樉绀簀son鐨勬柟娉曟槸鐩存帴鐢╫ut鏂规硶鎵撳嵃銆1銆佸悗鍙扮粍瑁json鏁版嵁鏍煎紡锛JsonObject jsonObject=new JsonObject();jsonObject.addProperty("name", "john");jsonObject.addProperty("age", "18");jsonObject.addProperty("sex", "Male");HttpSession session=request.getSession(true);session....
绛旓細浣犺鏄剧ず鍦ㄥ摢閲岋紵濡傛灉鍙槸鍦ㄩ〉闈㈣緭鍑虹殑璇濓紝鍙互鐢╠ocument.write("浣犺杈撳嚭鐨勫唴瀹")
绛旓細閫氳繃 JSONObject绫诲氨鍙互浜 棣栧厛 浣犳妸杩欏嚑涓寘 涓嬩笅鏉 鏀惧埌浣犻」鐩傚鏋滄湁灏变笉瑕佷笅浜嗭細1.commons-lang.jar 2.commons-beanutils.jar 3.commons-collections.jar 4.commons-logging.jar 5.ezmorph.jar 6.json-lib-2.2.2-jdk15.jar 鍍忎綘杩欑鏄暟鎹舰寮 灏遍氳繃 JSONArray 濡傦細JSONArray datas...
绛旓細缃戜笂鎵惧埌鐨勫湪jsp涓鑾峰彇鏁版嵁鏂瑰紡鏈夎繖涔堜笁绉嶏細鏈変粈涔堢畝鍗曠殑鍦╦sp涓敤鐨勪唬鐮佸彲浠ユ妸浠ヤ笂杩欎簺鏂规硶涓緱鍒扮殑鏁版嵁缁欓泦涓繚瀛樹负涓涓猨son瀛楃涓蹭粈涔堢殑锛屽氨鏄鎬庝箞鎶婇偅浜涗釜getString寰楀埌鐨勬暟鎹叏閮ㄥ鐞嗗瓨鍒颁竴涓猨son瀛楃涓叉垨json鏍煎紡鐨勫璞′粈涔堢殑锛屾湁鐨勮瘽浠ｇ爜瑕佹庝箞鍔狅紝鍔犲湪鍝噷锛岄噷锛岄噷杩樻槸鍝紝瀹炲湪鏄病鍟ュ熀纭锛岀綉涓婃壘...
绛旓細jsonArray鍗虫槸鍖呭惈浜嗗涓猨son鐨勬暟缁 鍦jsp涓鏋滀綘鏄敤js杩涜鎺ユ敹鐨勮瘽锛岄偅涔堟帴鍒拌繖涓瓧绗︿覆涔嬪悗锛屼綘 浣跨敤 var s = eval(result) ;s渚夸細鏄竴涓猨s鐨刯son瀵硅薄 濡備綍鎺ユ敹鐨勯棶棰橈細浣犲彲浠ヤ娇鐢╦query鍙戦乤jax璇锋眰鍒板悗鍙帮紝鐒跺悗浼氭湁涓猻uccess鐨勫睘鎬э紝鍦ㄩ偅涓睘鎬у搴旂殑鏂规硶閲屼綘鍙互寰楀埌杩欎釜json鐨勫瓧绗︿覆 ...
绛旓細1锛JSP鍖呭惈浜咼AVA浠ｇ爜妯″潡鍜孒TML妯″潡锛屽湪杩欎袱涓ā鍧椾腑閮藉彲浠ュ鐞咼SON瀛楃涓叉暟鎹紱2锛孞AVA涓鐞JSON锛涓鑸細寮曞叆绗笁鏂笿AR鍖呮潵澶勭悊锛屽甯哥敤鐨:net.sf.json-lib,鍏蜂綋鐢ㄦ硶鍙嚜鏌;3,js涓鐞咼SON锛屽垯绠鍗曞緱澶氾紝鍙洿鎺ョ敤JS鑷甫鐨 JSON.parse(jsonStr)鎶妀son瀛楃涓茶浆鎹负涓涓猨s瀵硅薄,灏卞彲浠ュ儚瀵硅薄涓鏍锋搷浣...
绛旓細鐩存帴鍦ㄥ綋鍓峧sp鏂囦欢璺宠浆璺緞鍒jsp锛濡傛灉鐢╣et鏂瑰紡鐩存帴灏嗗弬鏁拌缃埌璺緞鍚庨潰锛屽鏋滅敤post鏂瑰紡锛屽彲浠ュ垱寤轰竴涓〃鍗昮orm锛岃缃负post鏂瑰紡锛屽皢鍙傛暟璁剧疆鍒拌〃鍗曚腑鎻愪氦鍗冲彲锛屽湪绗簩涓猨sp涓娇鐢${param.鍙傛暟}鏉鑾峰彇鍙傛暟鍗冲彲
绛旓細浣跨敤json-lib 鍖呮潵杩涜java 瀵硅薄鍜宩son 涔嬮棿鐨勭浉浜掕浆鎹 JSONArray jsonArray=JSONArray.fromObject(list);//灏唋ist 杞崲涓簀son 鏁扮粍 response.setContentType( application/json );//璁剧疆杩斿洖鐨勬暟鎹负json 瀵硅薄 濡傛灉鏄jsp 鐨勯〉闈㈢洿鎺ョ敤out.print(jsonArray);娉ㄦ剰缁熶竴缂栫爜 servlet 鎴栬卆ction 涓兘鐢╮esponse...
绛旓細1锛JSP鍖呭惈浜咼AVA浠ｇ爜妯″潡鍜孒TML妯″潡锛屽湪杩欎袱涓ā鍧椾腑閮藉彲浠ュ鐞咼SON瀛楃涓叉暟鎹紱2锛孞AVA涓鐞JSON锛 涓鑸細寮曞叆绗笁鏂笿AR鍖呮潵澶勭悊锛屽甯哥敤鐨: net.sf.json-lib, 鍏蜂綋鐢ㄦ硶鍙嚜鏌;3, js涓鐞咼SON锛 鍒欑畝鍗曞緱澶氾紝鍙洿鎺ョ敤JS鑷甫鐨 JSON.parse(jsonStr) 鎶妀son瀛楃涓茶浆鎹负涓涓猨s瀵硅薄, 灏卞彲浠ュ儚...
