用AJAX从服务器获取到的信息通常都是对象（相当于Objective-C中的字典）的形式，我们不仅仅要获得对象，还要把对象对应的键和值展示出来。这里简单地介绍一下：
这里涉及到的有html5、JavaScript、AJAX。
注：本人刚使用CSDN博客，还不会排版，以后会慢慢改进。希望可以帮助到大家，有不足之处，希望大家多多指教！
<! DOCTYPE html><html>
<head>
<metacharset="utf-8">
<title>获取用户信息</title> // 头部信息
</head>
<body>
<p>请输入用户名，来得到用户信息
<formname="myForm"> // 用表单来写文本框，当然可以用其他方法
用户名:<inputtype="text"name="fname">
</form>
<buttononclick="submit()">提交</button>
<hr> // 水平分割线
<div>
<pid="test">用户信息:</p> // 此处用于展示用户信息
</div>
<script>
function person(userId,idsUserId,idsGroupId,idsAppId,idsAppName,userName,password,lastName,
firstName,email) //根据服务器返回的对象来创建person，并赋值
{
this.userId=userId;
this.idsUserId=idsUserId;
this.idsGroupId=idsGroupId;
this.idsAppId=idsAppId;
this.idsAppName=idsAppName;
this.userName=userName;
this.password=password;
this.lastName=lastName;
this.firstName=firstName;
this.email=email;
}
function submit() //提交按钮的点击事件
{
varx= document.forms["myForm"]["fname"].value; //获取表单中文本框中的值
if(x==null || x =="")
{
alert("没有填写用户名");
return false;
}
else
{
注：以下是两中方式的数据，一个是本地的(注释掉的部分)，一个是从网络上获取的(未注释掉得部分)。两种数据的内容是一样的
// 以下是本地数据
// var userData = {"able":"T","depName":"","description":"","email":"meihua@qq.com",
"firstName":"梅","honour":"0","idCard":"","idsAppId":333333,
"idsAppName":"newmediainternal","idsGroupId":222222,"idsUserId":111111,
"jobNumber":"323r5366453453",
"lastName":"花","password":"a123456","userId":1733,"userName":"meihua"};
// user = new person(userData.userId,userData.idsUserId,userData.idsGroupId,
userData.idsAppId,userData.idsAppName,userData.userName,userData.password,
userData.lastName,userData.firstName,userData.email);
// var txtkey = "";
// var txtvalue = "";
// for (var keys in user) // 遍历user
{
txtkey =txtkey + i; //键相连
txtvalue =txtvalue + user[i]; //值相连
// values = user[keys];
//
var para = document.createElement("p"); // 创建p标签
//var nod = document.createTextNode(keys+':'+values); //创建文本节点
//para.appendChild(nod); // 把文本节点添加到p标签上
//
// var ele = document.getElementById("test");
//ele.appendChild(para); // 在test后添加新创建的p标签
//
// }
// 以下是从网络获取的数据
varxmlhttp= "";
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
}
xmlhttp.onreadystatechange=function()
// onreadystatechange表示服务器响应已做好被处理的准备时所执行的任务。
{
if(xmlhttp.readyState==4 &&xmlhttp.status== 200)
// 当readyState 等于 4 且status为 200 时，表示响应已就绪：
{
varuserData= eval('('+xmlhttp.responseText+')');
// 把得到的xmlhttp.responseText文本左右都添加上括号，再用eval()转换一下，否则文本不能正常显示。除了eval()，也可以用其他方法。
user = newperson(userData.userId,userData.idsUserId,
userData.idsGroupId,userData.idsAppId,userData.idsAppName,userData.userName,userData.password,userData.lastName,
userData.firstName,userData.email);
// 把得到的内容通过person函数赋值，得到新的对象user
// var txtkey = "";
// var txtvalue = "";
for(varkeys inuser) // 遍历user
{
// txtkey =txtkey+ i; //键相连
// txtvalue =txtvalue + user[i]; //值相连
values = user[keys];
varpara= document.createElement("p"); // 创建p标签
varnod= document.createTextNode(keys+':'+values);//创建文本节点
para.appendChild(nod); // 把文本节点添加到p标签上
var ele = document.getElementById("test");
ele.appendChild(para); // 在test后添加新创建的p标签
}
}
}
xmlhttp.open("GET","http://10.255.20.54:8080/tms/api/userApi!getUserByName.action?username="+x); // 设置请求信息。url中拼接上文本框中的值
xmlhttp.send(); // 向服务器发送请求
}
}
</script>
</body>
</html>
在文本框中输入：meihua，点击提交按钮。效果如下：
3188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
