如何从 servlet 获取 JSON 对象？

Question

I am making a simple html servlet program where I need get JSON object from the servlet, and in html I am able to get the data, but how can i refer to each attribute?

这是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"}]}如何分别使用全名和 email 获取Abhishek Raj Simon和a@a.com ？

阅读Artem的帖子后编辑

我的小服务程序

    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);

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 更简单、更容易理解。 The jQuery $.getJSON will do GET for you, and then evaluate the JSON response so the function is presented with nice JSON representation of your data that is easy to manipulate.

编辑：

在经过有趣的讨论之后，您可以引入更多改进，以便用适当的基于 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 object 到 Z466DEEC76ECDF6324FCA6D38571，避免自己编写它如果您不想使用 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 Object。 有一个eval() function 可以评估您的 JSON 字符串并返回 JSON Z493754317990151A.

以下示例应该可以工作（尽管未经测试）。

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()时阅读安全问题。 Alternatively, go to JSON.org and download a Javascript JSON parser or use JQuery instead.