JSON запрос с Javascript - PullRequest
       9

JSON запрос с Javascript

5 голосов
/ 05 января 2011

Я только начинающий в java-скрипте и JSON и никогда раньше не занимался этим. Мой работодатель только что попросил меня создать основной POC из них.
Сценарий: У меня есть REST API, и когда я его вызываю, он возвращает ответ в формате JSON.
Надо: Создайте HTML-страницу и используйте javascript для вызова этого REST API, захвата ответа JSON и печати на той же HTML-странице.

<script type="text/javascript">
    function loadMe() {
       loadJSON('http://myrestAPI');
   }
        function loadJSON(url) {
            //Help me here to capture the response and print in html page. 
         }
</script>

Буду признателен за вашу помощь. Это может быть просто, но для меня я понятия не имею, потому что я никогда не делал ничего подобного в java-скрипте и json. Я изумлённо смотрел, но ничего не мог найти.

Спасибо, чота

Ответы [ 5 ]

3 голосов
/ 05 января 2011
 function SendRequest(MSG)
 {
  var objJSON = {
   "msg" : MSG
  };
  var strJSON = encodeURIComponent(JSON.stringify(objJSON));
  new Ajax.Request("ReceiveJSON.jsp",
   {
    method: "post",
    parameters: "strJSON=" + strJSON,
    onComplete: Respond
   });
 }

function Respond(REQ)
 {
  document.getElementById("ResponseDiv").innerHTML=REQ.responseText;
 }
1 голос
/ 06 января 2011

Если вы просмотрите свой ответ на запрос REST, JSON может выглядеть примерно так

{
    "users": [
        {"first": "Peter",
         "last": "Griffin"}
    ],
    "books": [
        {"title": "Design Patterns",
         "author": "The Gang of Four",
         "year": 1995}

    ]

}

Этот результат запроса покоя может быть загружен как объект массива javascript

<script language="javascript">

var resultObj = <Result of your REST url + query pasted here>;

</script>

Тогда

вы получаете доступ к нему в html с помощью блоков javascript, таких как

document.write(resultObj.users[0].first)

который вернет 'Peter'

0 голосов
/ 14 февраля 2013

Вот полный рабочий пример использования jQuery, который должен работать.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.0.min.js"></script>
</head>

<body>


<div id="response">
    <p id="responseParagraph">Base text</p>
</div>

<script>
    $.getJSON('http://myrestAPI',
        function(data) {
            $('#responseParagraph').append("<p>"+data.responseMessage+"</p>");
        });
</script>
</body>
</html>
0 голосов
/ 06 января 2011

У Пранит есть простой ответ на javascript. Если вы можете использовать jquery (а на самом деле нет причин, по которым вы не можете), это станет намного проще:

<div id="response"></div>
$.get(url, function(data) {
  $('#response').append(data.property);
});
0 голосов
/ 05 января 2011
$.getJSON(url, null, function (data) { .... });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...