2012-04-10 29 views
5

Tôi đã có một vấn đề với yêu cầu JSONP của tôi .. Các dữ liệu sẽ không được hiển thị, Firebug cho thấy một lỗi "nhãn không hợp lệ" .."nhãn không hợp lệ" khi sử dụng JSONP?

enter image description here

My JavaScript:

$.ajax({ 
    url: link, 
    dataType: "jsonp", 
    beforeSend: function(xhr) { 
     var base64 = btoa(username + ":" + password); 
     xhr.setRequestHeader("Authorization", "Basic" + base64); 
     xhr.overrideMimeType("application/json"); 
    }, 
    jsonpCallback: "getResources" 
}) 

function getResources(data) { 
    alert(data); 
    alert(JSON.parse(data)); 
    $.each(data.groupStatus, function(i, item) { 
     $("body").append("<p>ID: " + item.id + "</p>"); 
    }); 
} 

JSON của tôi:

{ 
    "groupStatus": [ 
     { 
      "id": "Application Layer Configuration-ApplicationLayer", 
      "time": 1332755316976, 
      "level": 0, 
      "warningIds": [], 
      "errorIds": [] 
     }, 
     { 
      "id": "Application Layer-ApplicationLayer:nscalealinst2", 
      "time": 1333431531046, 
      "level": 0, 
      "warningIds": [], 
      "errorIds": [] 
     } 
    ] 
} 

HTML của tôi:

<html> 
<head> 
    <title>Monitor</title> 
    <link href="css/gadget.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script> 
</head> 
<body> 
    <div id="content"></div> 
    <script type="text/javascript" src="js/gadget.js"></script> 
</body> 

Yêu cầu hoạt động tốt, nhưng dù sao các dữ liệu không được hiển thị.

enter image description here

Im tìm kiếm một giải pháp cho ngày .. Ai có thể giúp tôi? Cảm ơn bạn trước!

SOLUTION (Cập nhật: 06.09.12)

Tôi đã giải quyết vấn đề này. Máy chủ (giao diện REST) ​​mà trên đó đã được thực hiện đã không có chức năng gọi lại thực hiện .. Một cách khác để thiết lập các yêu cầu crossdomain KHÔNG sử dụng JSONP là để thiết lập biến jquery sau:

jQuery.support.cors = true; 
+1

Điều này là do JSON là * không * một chương trình JS hợp lệ nhưng nó đang cố gắng để được sử dụng như một. Tìm hiểu lý do tại sao JSONP không hoạt động như mong đợi. (btw, 'getRessources' trông giống như lỗi chính tả.) –

+0

yêu cầu hoạt động tốt ..Tôi đã thêm hình ảnh với câu trả lời .. – P4tR

+2

Phản hồi không phải là JSONP, đó là JSON. Các phản hồi JSONP được cho là được bao bọc bên trong một cuộc gọi hàm như 'callback ({" foo ":" bar "})' –

Trả lời

7

Việc đối phó với một cuộc gọi JSONP cần bọc chính JSON trong một cuộc gọi hàm, trong đó tên của hàm được gọi thường được cung cấp trong url. jQuery tự động thêm một tham số chuỗi truy vấn của "gọi lại" vào URL đang được yêu cầu, vì vậy kịch bản trên máy chủ của bạn nên làm một cái gì đó tương tự như:

// assuming that $JSON contains your JSON content 
print "{$_REQUEST['callback']}({$JSON});"; 

Lý do cho việc thêm tên của một hàm để phản ứng là một yêu cầu JSONP thực sự là một thẻ script được nối vào DOM thay vì một yêu cầu thông thường sẽ được thực hiện bởi một đối tượng XMLHttpRequest. Sử dụng JSONP cho phép trình duyệt thực hiện các yêu cầu tên miền chéo nếu không sẽ bị chặn theo chính sách tên miền chéo áp dụng (theo mặc định) cho XHR.

+0

câu trả lời xuất sắc. chỉ một bổ sung. có vẻ như với tôi, rằng có một lỗi chính tả cú pháp - cú đúp đóng là sai chỗ. phải in "{$ _REQUEST ['gọi lại'] ({$ JSON})};"; – heximal

+0

Ở đây các dấu ngoặc đang được sử dụng bởi PHP để nội suy các biến thành một chuỗi, vì vậy '{$ _REQUEST ['callback']} ({$ JSON});' sẽ được in dưới dạng 'someCallback ({" my ":" JSON "})' trong kết quả đầu ra, giả sử rằng '$ _REQUEST ['callback']' là 'someCallback' và' $ JSON' tương đương với 'mảng (" my "=>" JSON ")' – steveukx

+0

ah, tôi thấy, bạn phải. Niềng răng này rất quan trọng khi bạn dự định nhúng các biến phức tạp hơn chỉ là $ JSON (trong trường hợp này là các dấu ngoặc không bắt buộc) như mảng vào chuỗi. – heximal

1

Nếu kịch bản AJAX được lưu trữ trên cùng một miền sau đó bạn có thể sử dụng dataType: "json" như thế này:

function getResources(data, textStatus, jqXHR) { 
    console.log(data); 
    // no need to do JSON.parse(data) 
    $.each(data.groupStatus, function(i, item) { 
     $("body").append("<p>ID: " + item.id + "</p>"); 
    }); 
} 
$.ajax({ 
    url: link, 
    dataType: "json", 
    beforeSend: function(xhr) { 
     var base64 = btoa(username + ":" + password); 
     xhr.setRequestHeader("Authorization", "Basic" + base64); 
     xhr.overrideMimeType("application/json"); 
    }, 
    success: getResources 
});​ 

Nếu kịch bản AJAX được lưu trữ trên tên miền khác thì máy chủ phải trả lại dữ liệu JSONP - JSON dữ liệu bọc bên trong một lời gọi hàm:

callback(
    { 
     "groupStatus": [] 
    } 
);​ 

Nếu trở về máy chủ dữ liệu JSON trần sau đó bạn sẽ nhận được phân tích cú pháp sai lầm vì một yêu cầu JSONP là khoảng tương tự như tiêm một thẻ <script src="...">. Để hiểu tại sao đối tượng JSON trần nguyên nhân literal phân tích lỗi, hãy xem xét những ví dụ:

// WORKS 
{ 
    alert("foo"); 
} 

// PARSE ERROR -- quote from MDN: 
// You should not use an object literal at the beginning of a statement. 
// This will lead to an error or not behave as you expect, because the { 
// will be interpreted as the beginning of a block. 
{ 
    "foo": "bar" 
} 

// WORKS 
callback({ 
    "foo": "bar" 
})​ 
Các vấn đề liên quan