Question

我正在创建一个简单的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>

当我点击按钮时，我只收到1个提示显示{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 part

var res=eval('(' + client.responseText + ')');
        alert(res);     
        alert(res.employees.fullname);
        alert(res.employees.email);

Answer 1

我认为您应该稍微更改从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>

Answer 2

我建议您使用GSON库，它允许您将Java对象序列化为json，以避免自己编写它。如果您不想使用GSON，那么还有很多其他库使用相同的功能。

//inside your get method

Gson gson = new Gson( );
List<Employe> employees = new ArrayList<Employe>( );

// populate your list here

response.setContentType( "application/json");
response.getWriter( ).println( gson.toJson( employees));


//end

然后在javascript中你可以这样做，因为它已经在其他答案中建议了。并注意更新响应内容类型。

Answer 3

var res=client.responseText;
var temp = 'resObj=' + res;
eval(temp);
alert(resObj.employees.fullname);

JSON只是文本，但是在javascript语法中。您需要通过“eval”方法传递它，该方法将以javascript评估和执行文本。

我的建议是，使用jQuery或其他一些javascript框架，以避免混淆所有的锅炉板javascript。

Answer 4

这是因为您正在接收JSON字符串，但您没有将其转换为JSON对象。有一个eval()函数可以评估你的JSON字符串并返回一个JSON对象。

以下示例应该有效（虽然未经测试）。

if(client.readyState==4&&client.status==200)
     {
        var res=eval('(' + client.responseText; + ')');
        alert(res);     
        alert(res.employees[0].fullname);
        alert(res.employees[0].email);   
     }

警告：我建议您在使用eval()时阅读安全问题。或者，转到JSON.org并下载Javascript JSON解析器或改为使用JQuery。

如何从servlet获取JSON对象？

4 个答案: