我正在制作一个简单的html servlet程序,我需要从servlet中获取JSON对象,并且在html中我可以获取数据,但是如何引用每个属性?
这是servlet get
方法
PrintWriter out=response.getWriter();
StringBuffer emps = new StringBuffer("{employees:[");
emps.append("{fullname:\"Abhishek Raj Simon\"},{email:\"a@a.com\"}]");
emps.append("}");
out.println(emps);
JS发送
function getJson()
{
var url_action="/temp/jsontest";
var form=document.forms["mainForm"];
var splitOutput;
var client;
var dataString;
if (window.XMLHttpRequest){
client=new XMLHttpRequest();
} else {
client=new ActiveXObject("Microsoft.XMLHTTP");
}
client.onreadystatechange=function(){
if(client.readyState==4&&client.status==200)
{
var res=client.responseText;
alert(res);
alert(client.responseText.employees.fullname); //DOES NOT WORK
alert(client.responseText.employees.email); //DOES NOT WORK
}
};
client.open("GET",url_action,true);
client.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
client.send();
和一个简单的形式
<form>
<input type="button" value="get me some json" onclick="getJson();">
</form>
当我单击该按钮时,我只收到一条显示
{employees:[{fullname:"Abhishek Raj Simon"},{email:"a@a.com"}]}
的警报。如何分别使用全名和电子邮件来获取Abhishek Raj Simon
和a@a.com
?阅读Artem的文章后进行编辑
我的servlet
Gson gson = new Gson( );
List<Employee> employees = new ArrayList<Employee>();
Employee emp=new Employee();
emp.setFullname("Abhishek Raj Simon");
emp.setEmail("a@a.com");
employees.add(emp);
response.setContentType( "application/json");
out.println( gson.toJson( employees));
js部分
var res=eval('(' + client.responseText + ')');
alert(res);
alert(res.employees.fullname);
alert(res.employees.email);
最佳答案
我认为您应该稍微更改从Servlet发送的JSON:{employees:[{fullname:"Abhishek Raj Simon", email:"a@a.com"}]}
在这种情况下会更好一些。
我建议jQuery,因为pap也建议这样做。该代码将是:
$.getJSON('/temp/jsontest', function(data) {
var items = [];
for (employee in data.employees) {
items.push(employee.fullname + '<' + employee.email + '>');
}
alert('Employees: ' + items.join(', '));
});
在我看来,它比处理原始XHR更加容易和容易理解。 jQuery
$.getJSON
将为您执行GET
,然后评估JSON响应,以便该函数以易于操作的数据的漂亮JSON表示形式呈现。编辑:
在进行了有趣的讨论之后,您可以引入一些其他改进,以便用适当的基于JQuery的实现替换低级代码。
<script>
$(document).ready(function() {
$("#json-button").click(function() {
$.getJSON('/temp/jsontest', function(data) {
var items = [];
for (employee in data.employees) {
items.push(employee.fullname + '<' + employee.email + '>');
}
alert('Employees: ' + items.join(', '));
});
});
});
</script>
<form>
<input id="json-button" type="button" value="get me some json">
</form>