Сделать запрос JSONP междоменного ajax с помощью jQuery

Я хотел бы проанализировать данные массива JSON с помощью jquery ajax со следующим кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample</title>
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    var result;
    function jsonparser1() {
        $.ajax({
            type: "GET",
            url: "http://10.211.2.219:8080/SampleWebService/sample.do",
            dataType: "jsonp",
            success: function (xml) {
                alert(xml.data[0].city);
                result = xml.code;
                document.myform.result1.value = result;
            },
        });
    }        
</script>    
</head>
<body>
<p id="details"></p>
<form name="myform">
    <input type="button" name="clickme" value="Click here to show the first name" onclick=jsonparser1() />
    <input type="text" name="result1" readonly="true"/>        
</form>
</body>
</html>

Мои данные JSON:

{"Data":   [{"Address":"chetpet","FirstName":"arulmani","Id":1,"LastName":"sathish","City":"chennai"},{"Address":"ramapuram","FirstName":"raj","Id":2,"LastName":"nagu","City":"chennai"},{"Address":"ramapuram","FirstName":"raj","Id":2,"LastName":"nagu","City":"chennai"},{"Address":"ramapuram","FirstName":"ramaraj","Id":3,"LastName":"rajesh","City":"chennai"},{"Address":"ramapuram","FirstName":"yendran","Id":3,"LastName":"sathi","City":"chennai"}],"Code":true}

Но я не получаю никаких результатов... кто-нибудь, пожалуйста, помогите...

Ответы

Ответ 1

Понятная концепция

Вы пытаетесь выполнить междоменный вызов AJAX? Значит, ваш сервис не размещен в одном и том же пути веб-приложения? Ваш веб-сервис должен поддерживать метод инъекции, чтобы сделать JSONP.

Ваш код кажется прекрасным, и он должен работать, если ваши веб-службы и веб-приложение размещены в одном домене.

Когда вы выполняете $.ajax с dataType: 'jsonp', что означает, что jQuery фактически добавляет новый параметр в URL-адрес запроса.

Например, если ваш URL-адрес http://10.211.2.219:8080/SampleWebService/sample.do, то jQuery добавит ?callback={some_random_dynamically_generated_method}.

Этот метод более похож на прокси-сервер, фактически прикрепленный в объекте window. Это ничего конкретного, но выглядит примерно так:

window.some_random_dynamically_generated_method = function(actualJsonpData) {
    //here actually has reference to the success function mentioned with $.ajax
    //so it just calls the success method like this: 
    successCallback(actualJsonData);
}

Резюме

Ваш клиентский код выглядит просто отлично. Однако вам необходимо изменить свой серверный код, чтобы обернуть ваши данные JSON с именем функции, которое передается с строкой запроса. то есть.

Если вы запросили строку запроса

?callback=my_callback_method

тогда ваш сервер должен получить данные ответа, завернутые следующим образом:

my_callback_method({your json serialized data});

Ответ 2

Вам нужно использовать плагин ajax-cross-origin: http://www.ajax-cross-origin.com/

Просто добавьте параметр crossOrigin: true

$.ajax({
    crossOrigin: true,
    url: url,
    success: function(data) {
        console.log(data);
    }
});

Ответ 3

Ваши JSON-данные содержат свойство Data, но вы получаете доступ к Data. Он чувствителен к регистру

function jsonparser1() {
    $.ajax({
        type: "GET",
        url: "http://10.211.2.219:8080/SampleWebService/sample.do",
        dataType: "json",
        success: function (xml) {
            alert(xml.Data[0].City);
            result = xml.Code;
            document.myform.result1.value = result;
        },
    });
}

РЕДАКТИРОВАТЬ Также город и код не в том случае. (Спасибо @Кристофер Кенни)

EDIT2 Он также должен быть json, а не jsonp (по крайней мере в этом случае)

ОБНОВЛЕНИЕ. Согласно вашему последнему комментарию, вы должны прочитать этот ответ: fooobar.com/questions/7895/... от Abdul Munim

Ответ 4

Попробуйте

alert(xml.Data[0].City)

Сейсмологически!

Ответ 5

вам нужно проанализировать ваш xml с помощью jquery json parse... i.e

  var parsed_json = $.parseJSON(xml);

Ответ 6

оповещения (xml.data [0].city);

использовать xml.data [ "Data" ] [0].city вместо