java页面上赋值_java中使用json对页面元素赋值

关于json的笔记，写得有点乱，下次有时间我再整理一下。

var

myFirstJSON

=

...

{

"firstName":"John",                   

"lastName":"Doe",                    

"age":23                  }

;

document.writeln(myFirstJSON.firstName);

//

Outputs John

document.writeln(myFirstJSON.lastName);

//

Outputs Doe

document.writeln(myFirstJSON.age);

//

Outputs 23

JSONObject jsonObj

=

new

JSONObject();

jsonObj.put(

"

name

"

,

"

吉田

"

);

JSONArray dep

=

new

JSONArray();

dep.put(

"

管理部

"

);

dep.put(

"

開発部

"

);

dep.put(

"

営業部

"

);

jsonObj.put(

"

sex

"

,

"

M

"

);

jsonObj.putOpt(

"

department

"

, dep);

jsonObj.put(

"

age

"

,

23

);

setJson_xml(jsonObj.toString());

等价于json对象： {"sex":"M","age":23,"name":"吉田","department":["管理部","開発部","営業部"]}

需要一个json的解析类：json-parser.js (注：网上有个叫json.js的开源包，好像具有相同的功能)

(function ($) {

var m = {

'/b': '//b',

'/t': '//t',

'/n': '//n',

'/f': '//f',

'/r': '//r',

'"' : '//"',

'//': ''

},

s = {

'array': function (x) {

var a = ['['], b, f, i, l = x.length, v;

for (i = 0; i < l; i += 1) {

v = x[i];

f = s[typeof v];

if (f) {

v = f(v);

if (typeof v == 'string') {

if (b) {

a[a.length] = ',';

}

a[a.length] = v;

b = true;

}

}

}

a[a.length] = ']';

return a.join('');

},

'boolean': function (x) {

return String(x);

},

'null': function (x) {

return "null";

},

'number': function (x) {

return isFinite(x) ? '"' + String(x) + '"' : 'null';

},

'object': function (x) {

if (x) {

if (typeof x.splice == "function") {

return s.array(x);

}

if (!isNaN(x)) {

return s.number(x);

}

var a = ['{'], b, f, i, v;

for (i in x) {

v = x[i];

f = s[typeof v];

if (f) {

v = f(v);

if (typeof v == 'string') {

if (b) {

a[a.length] = ',';

}

a.push(s.string(i), ':', v);

b = true;

}

}

}

a[a.length] = '}';

return a.join('');

}

return 'null';

},

'string': function (x) {

if (/["

///x00-/x1f]/.test(x)) {

x = x.replace(/([/x00-/x1f//"])/g, function(a, b) {

var c = m[b];

if (c) {

return c;

}

c = b.charCodeAt();

return '//u00' +

Math.floor(c / 16).toString(16) +

(c % 16).toString(16);

});

}

return '"' + x + '"';

}

};

$.toJSON = function(v) {

var f = isNaN(v) ? s[typeof v] : s['number'];

if (f) return f(v);

};

$.parseJSON = function(v, safe) {

if (safe === undefined) safe = $.parseJSON.safe;

if (safe && !/^("(

//.|[^"///n/r])*?"|[,:{}/[/]0-9./-+Eaeflnr-u /n/r/t])+?$/.test(v))

return undefined;

return eval('('+v+')');

};

$.parseJSON.safe = false;

})(jQuery);

测试代码如下：代码基于struts2.(struts2的配置什么的，这里就不细说了+)

...

@ page contentType="text/html; charset=UTF-8"

%>

...

@ taglib prefix="s"uri="/struts-tags"

%>

<

html

>

<

head

>

<

meta

http-equiv

="Content-Type"

content

="text/html; charset=UTF-8"

/>

<

script

type

="text/javascript"

src

="js/jquery-1.2.1.pack.js"

>

script

>

<

script

type

="text/javascript"

src

="js/json-parser.js"

>

script

>

<

script

type

="text/javascript"

>

...

functionaddOption(objSelectNow,txt,val)...{

//使用W3C标准语法为SELECT添加OptionvarobjOption=document.createElement("OPTION");

            objOption.text=txt;

            objOption.value=val;

            objSelectNow.options.add(objOption);

        }

functionaddOptionGroup(selectId,optGroupString)...{

varoptGroup=optGroupString.split(",");

varobjSelect=document.getElementsByTagName("SELECT");

varobjSelectNow=objSelect[selectId];

            objSelectNow.length=1;

//成组添加Options

for(i=0; i

                addOption(objSelectNow, optGroup[i], optGroup[i]);

            }        }        

functionbindSelect(e, v)...{

            $("#"+e).append("请选择");

            $.each(v,function(k,value)...{

            $("#"+e).append(""+value[1]+"");

            });$("#"+e).val('120000');

        }        

        $(document).ready(function()...{

varjson='';

            json=json.replace(/"/g,'"');

varobj=jQuery.parseJSON(json);

            $("#textId").val(obj.name);

            addOptionGroup("selectId", obj.department.join(','));

//bindSelect('selectId', data.sf_dm);//alert($("#selectId").children().eq(1).val());//alert($("#selectId").children().eq(1).text());//var option = document.createElement("OPTION");//option.text = option.value = "1";//alert(option.value);//$("#selectId").append("请选择");//$("#selectId").append('1');//$("请选择").appendTo("#selectId");//$('option:eq(1)', "#selectId").attr('text', '这是一个美丽的故事。');

if(obj.sex=='M')...{

                document.getElementById("m_radioId").checked=true;

            }else...{

                document.getElementById("f_radioId").checked=true;

            }            

if(obj.age>20)...{

                document.getElementById("checkboxId").checked=true;

            }else...{

                document.getElementById("checkboxId").checked=false;

            }

            $("#insrow").click(function()...{

vartable=document.getElementById("tableId");

varindex=table.rows.length;

vartr=table.insertRow(index);

for(vari=0; i<5; i++)...{

vartd=tr.insertCell(i);

varinput=document.createElement("input");

                    input.type="text";

                    input.value="田中";

                    td.appendChild(input);

                }            });

            $("#delrow").click(function()...{

vartable=document.getElementById("tableId");

varindex=table.rows.length;

if(index<2)...{

                    alert("No Row To Delete!");

                }else...{

                    table.deleteRow(index-1);

                }            });

        });

        

functiontestTbl()...{

vartable=document.getElementById("tableId");

            table.insertRow(1);

varrows=table.rows[0];

for(vari=0; i

varinput=document.createElement("input");

                input.type="text";

                input.value="田中";

                rows.cells[i].appendChild(input);

            }        }        

functiontestTable()...{

            $("#tableId").append("

");  

vartable=document.getElementById("tableId");

varrows=table.rows;

for(varrs=0; rs

varcells=rows[rs].cells;

for(varcs=0; cs

varcell=cells[cs];

if(cell.tagName=='TH')...{

break;

                    }else...{

//var txtNode = document.createTextNode("aaaaaaa");varinput=document.createElement("input");

                        input.type="text";

                        input.value="田中"                        cell.appendChild(input);

                    }                }            }        }        

functiontestSelect()...{

            $("#selectId").find('OPTION').each(function()...{

switch($(this).attr("value"))...{

case'1':

                    $(this).text("1");

break;

case'2':

                    $(this).text("2");

break;

default:

break;

                }            });

        }

script

>

head

>

<

body

>

<

form

>

            Name:

<

input

id

="textId"

type

="text"

>

<

br

>

<

br

>

            Department:

<

select

name

="selectId"

>

select

>

<

br

>

<

br

>

            Male:

<

input

type

="radio"

name

="rad"

id

="m_radioId"

>

            Female:

<

input

type

="radio"

name

="rad"

id

="f_radioId"

>

<

br

>

<

br

>

            Age > 20:

<

input

type

="checkbox"

id

="checkboxId"

>

<

br

>

<

br

>

<

input

type

="button"

id

="insrow"

value

="行追加"

>

<

input

type

="button"

id

="delrow"

value

="行削除"

>

<

table

width

="483"

height

="35"

border

="1"

id

="tableId"

>

<

tr

>

<

th

>

Text

th

>

<

th

>

Radio

th

>

<

th

>

Checkbox

th

>

<

th

>

Select

th

>

<

th

>

TextArea

th

>

tr

>

table

>

form

>

body

>

html

>