it-roy-ru.com

Сделайте междоменный запрос 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}

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

36
prabu R

Концепция объяснила

Вы пытаетесь сделать междоменный 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});
85
Abdul Munim

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

Просто добавьте опцию crossOrigin: true

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

Ваши 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;
        },
    });
}        

EDIT Также Город и Код не в том случае. (Спасибо, Кристофер Кенни)

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

UPDATE Согласно вашему последнему комментарию, вы должны прочитать этот ответ: https://stackoverflow.com/a/11736771/325836 от Abdul Munim

1
Yngve B-Nilsen

Пытаться 

alert(xml.Data[0].City)

Дело чувствительно!

1
pirklajos

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

  var parsed_json = $.parseJSON(xml);
0
Erdem E.

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

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

0
Stepan Suvorov

использовать открытый публичный прокси YQL, размещенный на Yahoo. Обрабатывает XML и HTML

https://Gist.github.com/rickdog/d66a03d1e1e5959aa9b68869807791d5

0
rickdog