用JavaScript获取Json格式的用户信息，并利用模型展示出来
2014-10-22 13:27
363 查看
用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，点击提交按钮。效果如下：
这里涉及到的 有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，点击提交按钮。效果如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [Windows编程] 利用dxdiag获取用户机器硬件及OS信息
- 利用struts2的Interceptor来使struts2的表单验证框架返回json格式的fieldErrors信息
- 利用json获取天气信息
- 获取优酷视频信息json格式
- 根据仿人人客户端教程,编程实现Demo(二)---实现JSON解析人人API2.0,获取用户信息以及新鲜事信息
- [Windows编程] 利用dxdiag获取用户机器硬件及OS信息
- 我的Android进阶之旅------>Android获取服务器上格式为JSON和XML两种格式的信息的小程序
- C# 语言如何获取json格式的数据，不用javascript用c#实现。。。
- 微信公众平台开发—利用OAuth2.0获取微信用户基本信息
- 微信公众平台开发—利用OAuth2.0获取微信用户基本信息
- 用Javascript获取SharePoint当前登录用户的用户名及Group信息
- JSON 是 JavaScript 原生格式 以及引申出来的思考
- 利用javascript userAgent函数获取用户浏览器类型
- 利用json获取天气信息
- 利用JavaScript获取客户端的硬件信息
- JavaScript 利用Cookie记录用户登录信息
- 用树展示上下级关系-jquery+ztree+json的运用之获取选中的信息
- 用树展示上下级关系-jquery+ztree+json的运用之获取选中的信息
- 74将进程信息初步展示出来（BUG[已解决]：用户进程标签加载不了）
- 微信公众平台开发—利用OAuth2.0获取微信用户基本信息