如何使用Javascript / jQuery(Ajax)检索Google QPX的结果?

时间:2015-02-04 00:30:12

标签: javascript ajax json google-api restful-url

我已经注册了Google API控制台并设置了帐户和API密钥,但我的问题是如何从Google QPX中检索结果。 导致以下错误的原因是什么?

设置Google请求的json查询

var FlightRequest = {
  "request": {
    "slice": [
      {
        "origin": "DCA",
        "destination": "LAX",
        "date": "2015-02-11"
      }
    ],
    "passengers": {
      "adultCount": 1,
      "infantInLapCount": 0,
      "infantInSeatCount": 0,
      "childCount": 0,
      "seniorCount": 0
    },
    "solutions": 20,
    "refundable": false
  }
}

请求数据并将其返回。

$.ajax({
 url: "https://www.googleapis.com/qpxExpress/v1/trips/search?key=XXXXXXXXXXXXXXXX", 
 type: 'POST',
 dataType: 'json',
 contentType: 'application/json',
 data: FlightRequest,
 success: function (data) {
  alert(JSON.stringify(data));
},
  error: function(){
   alert("Cannot get data");
 }
});

错误: 我已经检查了我的API密钥并且是正确的。什么可能导致这个问题?

  

状态400(错误请求)

2 个答案:

答案 0 :(得分:2)

我通过使用谷歌浏览器POSTMAN App并使用JSON.stringify();将Google json发送请求(对象)转换为$.ajax()的字符串来解决问题;这是用jQuery解决这个问题的一个步骤。

首先为您的Google json请求创建变量: 我们将使用它与Ajax来检索数据。

var FlightRequest = {
      "request": {
        "slice": [
          {
            "origin": "DCA",
            "destination": "LAX",
            "date": "2015-02-11"
          }
        ],
        "passengers": {
          "adultCount": 1,
          "infantInLapCount": 0,
          "infantInSeatCount": 0,
          "childCount": 0,
          "seniorCount": 0
        },
        "solutions": 20,
        "refundable": false
      }
    };

使用jQuery $.ajax();发送访问密钥内容类型数据请求

$.ajax({
     type: "POST",
     //Set up your request URL and API Key.
     url: "https://www.googleapis.com/qpxExpress/v1/trips/search?key=YOUR-API-KEY", 
     contentType: 'application/json', // Set Content-type: application/json
     dataType: 'json',
     // The query we want from Google QPX, This will be the variable we created in the beginning
     data: JSON.stringify(FlightRequest),
     success: function (data) {
      //Once we get the result you can either send it to console or use it anywhere you like.
      console.log(JSON.stringify(data));
    },
      error: function(){
       //Error Handling for our request
       alert("Access to Google QPX Failed.");
     }
    });

答案 1 :(得分:0)

这就是你的HTML

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="test.js"></script>
    </head>
    <body>
            <input type="submit" id="submit" value="Submit">
            <p id="demo"></p>
    </body>
</html>

现在创建一个名为test.js的新文件,并将其放在与HTML文件相同的目录中。将以下代码放在新的test.js文件中

最后,在代码中添加您自己的API密钥(它表示您的API密钥)

var sendRequest = function(){
var FlightRequest = {
  "request": {
    "slice": [
      {
        "origin": "LHR",
        "destination": "LAX",
        "date": "2018-9-10"
      }
    ],
    "passengers": {
      "adultCount": 1,
      "infantInLapCount": 0,
      "infantInSeatCount": 0,
      "childCount": 0,
      "seniorCount": 0
    },
    "solutions": 10,
    "refundable": false
  }
};

    $.ajax({
     type: "POST",
     url: "https://www.googleapis.com/qpxExpress/v1/trips/search?key=YOUR_API_KEY", 
     contentType: 'application/json', 
     dataType: 'json',
     data: JSON.stringify(FlightRequest),
     success: function (data) {

      var myJSON = JSON.stringify(data.trips.tripOption[0].pricing[0].saleTotal);

      console.log(myJSON);

      document.getElementById("demo").innerHTML = myJSON;

    },
      error: function(){
       alert("Access to Google QPX Failed.");
     }
    });
}

$(document).ready(function(){
    $("#submit").click(function(){sendRequest();});
});

现在在上面的代码中,如果您想了解如何过滤结果,我将从LHR到LAX获得1个价格,check out this link