我正在制作一个简单的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 Simona@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>

10-07 19:14
查看更多