Question

我是JQuery的新手。我正在尝试开发一个小型旅行网站来检查PNR。我目前正在使用旅游公司之一提供的API。一旦我们点击了API网址，浏览器就会以JSON格式显示结果。

我正在使用JQuery，JS和HTML。我想知道如何将通过点击API检索到的JSON值（以字符串格式）存储在变量中，并在以后的脚本中使用它。

PS：尽管我在Stackoverflow中找到了很多答案，但是没有一个结果有效。请帮助以适当的价值。

示例代码：（我正在使用一个文本框和一个按钮）

    <script>
function search_pnr(){
var pnr = $('#input_pnr').val();
var result;
var url = "http://api website/pnr"+pnr;

//Suggest the code here, to fetch the result from url and store in the variable result.

</script>

<input type="text" placeholder="Enter PNR" id ="input_pnr"/>
<input type="button" value="Search PNR" onclick="search_pnr()"/>

以下是从服务器获取的JSON值

{"to_station": {"lng": 77.2888291, "name": "ANAND VIHAR TERMINAL", "lat": 28.6118176, "code": "ANVT"}, "total_passengers": 1, "pnr": "6717552286", "journey_class": {"name": null, "code": "3A"}, "train": {"classes": [{"available": "N", "name": "SECOND AC", "code": "2A"}, {"available": "Y", "name": "THIRD AC", "code": "3A"}, {"available": "N", "name": "SECOND SEATING", "code": "2S"}, {"available": "N", "name": "FIRST AC", "code": "1A"}, {"available": "Y", "name": "AC CHAIR CAR", "code": "CC"}, {"available": "N", "name": "FIRST CLASS", "code": "FC"}, {"available": "N", "name": "3rd AC ECONOMY", "code": "3E"}, {"available": "N", "name": "SLEEPER CLASS", "code": "SL"}], "days": [{"code": "MON", "runs": "N"}, {"code": "TUE", "runs": "Y"}, {"code": "WED", "runs": "N"}, {"code": "THU", "runs": "Y"}, {"code": "FRI", "runs": "N"}, {"code": "SAT", "runs": "Y"}, {"code": "SUN", "runs": "N"}], "number": "22405", "name": "BGP-ANVT GARIB RATH"}, "from_station": {"lng": 86.9828131, "name": "BHAGALPUR", "lat": 25.2494829, "code": "BGP"}, "passengers": [{"booking_status": "CNF/G12/36/GN", "no": 1, "current_status": "CNF/-/0/GN"}], "reservation_upto": {"lng": 77.2888291, "name": "ANAND VIHAR TERMINAL", "lat": 28.6118176, "code": "ANVT"}, "response_code": 200, "boarding_point": {"lng": 86.9828131, "name": "BHAGALPUR", "lat": 25.2494829, "code": "BGP"}, "debit": 3, "doj": "25-08-2018", "chart_prepared": false}

还可以帮助您读取给定JSON中的对象和数组。

Answer 1

您可以使用ajax从网址中获取结果

var result;
var url = "http://api website/pnr"+pnr;
$.ajax
({
    url: url,
    type: 'GET',
    dataType: 'json',
    success: function(data)
    {
        result = data;
        alert(JSON.stringify(data));
    }
});

Answer 2

您只需要解析JSON以及如何读取每个对象。这应该给您一个良好的开端

$.ajax({
    type: "GET",
    url: "http://api_website/pnr"+pnr,
    data: data,
    success: function(resultData) { 
        console.log(resultData);

        var to_station = resultData.to_station;
        var trains = resultData.train;
        var passengers = resultData.passengers;

        alert("Station Name: "to_station.name);
        alert("Passengers: "passengers.booking_status);


    },
    error(function() { 
        alert("Something went wrong"); 
    }
});

您可以阅读更多关于how to read JSON here的内容。

Answer 3

$.ajax({
  method: "GET",
  url: url
})
  .done(function( data ) {
    console.log(data)
    // see what properties you need from data object and save it to variable
    var data = data
  });

Answer 4

第一件事，

使用javascript文件。...API调用最好在js文件而不是在脚本标记中完成。第二件事，如果您想以json格式存储它，您可以按照声明url变量的方式将其存储为一个值。由于您正在获取数据，因此我假设这是一个获取请求，您可以在以下链接中找到有关它们的更多信息-

此外，如果数据不是很敏感，您可以将其存储在浏览器的本地存储中，以便以后也可以在其他网页上访问它。

在您当前的json数据中，我想说的是，如果您将其声明为变量， apiResult 您的to_station为apiResult.to_station，lng值为apiResult.to_station.lng，依此类推。

Answer 5

希望这对您有帮助，祝您好运。

每个人都已经添加了AJAX示例，因此我将其省略。

因此，对于读取对象，您只需通过各种方式解析所需的内容，如果您知道对象的外观以及所需的确切内容，则可以使用点表示法。如果您希望更动态地抓取事物，可以使用高阶函数或for循环以及获取条目（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries的Object原型示例

您可能会考虑使用localStorage来存储信息，具体取决于您使用的信息是内置Web API 这是MDN的定义

只读的localStorage属性允许您访问存储文件原件；存储的数据保存在浏览器会话。 localStorage与sessionStorage类似，除了当存储在localStorage中的数据没有到期时间时，数据页面会话结束时，存储在sessionStorage中的存储将被清除- 也就是关闭页面时。

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Answer 6

您可能想使用AJAX。您必须确定服务器将如何检索数据。如果是JSON格式，请执行以下操作：

<script>
    function search_pnr(){
        var pnr = $('#input_pnr').val();
        var result;
        var url = "http://api website/pnr"+pnr;
        $.getJSON( url, function( data ) {
            result = data;
            $.each( data, function( key, value ) {
                // whatever with keys and values if needed
            }
        );

    }
</script>

Ref w3 Schools

JQuery official website

Answer 7

当前所有的浏览器都内置了本机JSON支持。因此，只要您不使用IE6 / 7之类的史前浏览器，就可以像这样轻松地做到这一点：

var j={"name":"binchen"};
JSON.stringify(j); // '{"name":"binchen"}'

有关更多信息，请访问link

如何使用JQuery存储从URL获取的JSON值？

7 个答案: