使用 Javascript 进行 Json 请求

发布于 2024-10-10 16:35:20 字数 568 浏览 4 评论 0原文

我只是 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 中做过类似的事情。我睁大眼睛却找不到任何东西。

谢谢，乔塔

原文

I am just beginner on java script and JSON and never had done any work in these before. My employer has just asked me to create the basic POC of these.

Scenario:
I have a REST API and when i call it, it returns back response in JSON format.

Need to To:
Create a HTML page and use javascript to call that REST API and capture JSON response and print in the same HTML page.

<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>

I would appreciate your help. This might be simple, but for me i have no idea because i never have done anything similar in java script and json. I goggled but could not find anything.

Thanks,
chota

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三生一梦 2024-10-17 16:35:20

 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;
 }

 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;
 }

回复收藏 0 原文

行至春深 2024-10-17 16:35:20

如果您查看 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>

然后，

您可以使用 javascript 块在 html 中访问它，就像

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

返回 'Peter'

If you view your REST request response, the JSON might be something like this

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

    ]

}

This rest query result can be loaded as a javascript array object

<script language="javascript">

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

</script>

Then,

you access it in your html with javascript blocks like

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

which would return 'Peter'

回复收藏 0 原文

昨迟人 2024-10-17 16:35:20

Praneeth 有简单的 javascript 答案。如果你可以使用 jquery（而且确实没有理由不能），它会变得更容易：

<div id="response"></div>
$.get(url, function(data) {
  $('#response').append(data.property);
});

Praneeth has the simple javascript answer. If you can use jquery (and there really is no reason you cannot) it gets way easier:

<div id="response"></div>
$.get(url, function(data) {
  $('#response').append(data.property);
});

回复收藏 0 原文

黯淡〆 2024-10-17 16:35:20

$.getJSON(url, null, function (data) { .... });

$.getJSON(url, null, function (data) { .... });

回复收藏 0 原文

临走之时 2024-10-17 16:35:20

这是一个使用 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>

Here's a complete working example using jQuery that should work.

<!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 原文

~没有更多了~