在 JavaScript 中解析来自 servlet 的 JSON 数据

Question

我正在尝试使用 JQuery 解析从我的 servlet 返回的 json 数据， 这里是 JavaScript：

$(document).ready(function(){
//alert('document ready');
$('#search-btn').click(function(){
//  alert($('#searchbar').val());
    var url= 'http://localhost:8080/SMDE/Search?q='+$('#searchbar').val();
    //alert(url);
    var table='';
    $.get(url,function(response){
        //alert(response);
        if(response){
            //alert(response);
            $('#container').html(response);
            for(i=0;i<response.data.length;i++){
                var n= response.data[i].name;
                var c= reponse.data[i].category;
                var ii=response.data[i].id;
                table=table+"<div class='content'>" +
                        "<h3>Page Name :" +n+"<br/>"
                        "Category :" +c+"<br/>"
                        "</h3>" +
                        "<form action='/Profile' method='POST'>" +
                        "<input type='hidden' name='id' value='" +ii+
                        "'<input type='submit' class='btn' value='More...' /></form></div>";
            }
            $('#container').html(table);
        }
        if (response.error) {
              alert('Error - ' + response.error.message);
              //return
        } 
    });
}); });

当我取消注释警报（响应）时；我得到正确的回应，但如果我提醒（response.data）它说未定义。 浏览器直接给出url的结果是：

{ "data": [
{
  "category": "Media\/news\/publishing",
  "name": "CNN",
  "id": "5550296508"
},
{
  "category": "Media\/news\/publishing",
  "name": "CNN International",
  "id": "18793419640"
},
{
  "category": "Tv show",
  "name": "CNN Heroes",
  "id": "86418982488"
},
{
  "category": "Tv network",
  "name": "CNN en Espa\u00f1ol",
  "id": "89613772643"
},
{
  "category": "Media\/news\/publishing",
  "name": "CNNMoney",
  "id": "6651543066"
},
{
  "category": "News\/media website",
  "name": "CNNM\u00e9xico",
  "id": "323626813995"
}] }

请帮助处理数据。

servlet 代码是：

    import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.*;

/**
 * Servlet implementation class Search
 */
@SuppressWarnings("unused")
@WebServlet("/Search")
public class Search extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public Search() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String key = request.getParameter("q");
        PrintWriter out = response.getWriter();
        String result = Facebook.callGet("search?q="+key+"&type=page");
        try{
            /*JSONObject json = new JSONObject(result);
            response.setContentType("application/json");
            out.print(json);*/
            out.println(result);
        }catch(Exception e){
            out.println("error");
        }
    }

}

Answer 1

您需要设置响应内容类型以提示 jQuery 如何解释响应正文。如果是 JSON，则需要将响应内容类型设置为application/json：

response.setContentType("application/json");

这样您就不需要像其他答案中建议的那样使用丑陋且安全/容易出错的解决方法，例如 eval()。

另见：

• How to use Servlets and Ajax?

Answer 2

您的$.get() 方法似乎有问题。该方法异步工作，因此在您读取时接收到的数据是未定义的。 警报语句增加了整个过程的延迟。这就是为什么您在取消注释语句时获取数据的原因。

• 使用$.post
• 设置属性async:false（使其同步）
• 或者把UI渲染逻辑放在回调成功函数中

Answer 3

$.get 读取原始响应数据。 response 是一个纯字符串，此时没有 json。

 $.get(url,function(response){
        var d = eval("("+response+")");
        alert(d.data);

此外，您的数据中没有关闭 ]。