Ajax调用API返回错误HTTP / 1.1 405方法不允许

时间:2015-02-25 10:22:35

标签: javascript jquery ajax google-maps cors

我写了一个非常简单的应用程序(页面上),其中有一个地图,用户可以在其上绘制圆圈。第一个圆圈是Source,下一个圆圈是目的地。我必须对API URL进行Ajax调用,以便获取用户在地图上绘制的圆圈内的所有单元格ID。

这是我到现在为止所尝试的:

<html>
  <head>
    <title>Drawing tools</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link type="text/css" href="res/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript" src="res/jquery.min.js"></script>
    <script type="text/javascript" src="res/jquery-ui.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=drawing,places"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"> 

 var latitude;
 var longitude;
 var radius;

  (function () {
     var circle;

   function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8
   };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    markerOptions: {
      icon: 'images/beachflag.png'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
  google.maps.event.addListener(drawingManager, 'circlecomplete', onCircleComplete);
 }

 function onCircleComplete(shape) {
      var map=shape.getMap();
      var circle;
       //create an array where we store the circles
       if(!map.get('circles')){
          map.set('circles',[]); 
        }
       shape.setOptions(
                      (!map.get('circles').length)
                        ?//first circle
                         {type:'source',
                          fillColor:'#ff0000'
                         }
                        ://other circles
                         {type:'destination'}
                    );
      //push the circles onto the array 
      map.get('circles').push(shape);

        circle = shape;
        radius = circle.getRadius();
        center = circle.getCenter();
        latitude = circle.getCenter().lat();
        longitude = circle.getCenter().lng();

         doStuff();
     //    alert(radius);

    }   
   google.maps.event.addDomListener(window, 'load', initialize);
 })();


function doStuff() {
  var where_stm = 'within_circle('+latitude+','+longitude+','+radius+')';

     $.ajax({
         url: 'https://api.dandelion.eu/datagems/v2/SpazioDati/milano-grid/data?$limit=10&$offset=0&$app_id=7b22cb45&$app_key=dc836a05b4f775d8813d253ba07a4570',
         type: 'GET',
         contentType: "application/json",
         dataType: "json",
         data: {where:where_stm},
         success: function(response) {
               var ParsedObject = JSON.parse(response);        
                   console.log(ParsedObject);
                   },
         error: function(XMLHttpRequest, textStatus, errorThrown) {
                            console.log("error :"+XMLHttpRequest.responseText);
                    }
        });
  }

    </script>
  </head>  
<body>
  <div id="container">
     <div id="sidebar-left">
        <p> Please select your source place by using drawing tools on the map. </p>
       <div id="destinations">
        Now you can select one or more destination on the map using the same drawing tools 
       </div>

       <button onClick="doStuff()">Run Code</button>

     </div>
     <div id="map-canvas"></div>
    </div>
  </body>
</html>

我的问题:当我在地图上画一个圆圈时,我在控制台上看到了这个错误: OPTIONS https://api.dandelion.eu/datagems/v2/SpazioDati/milano-grid/data [HTTP/1.1 405 Method Not Allowed 350ms]当我点击它时,我看到了:

enter image description here

我很感激您的所有想法, 感谢

1 个答案:

答案 0 :(得分:2)

我通过Postman尝试了一个请求,使用GET和(仅!)您在代码段中提供的URL:200 / OK,没有任何缺陷。没有&#39;数据&#39;尝试它。它应该仅用于POST请求,而不是用于GET请求!

但是,因为你需要传递你的内心&#39;数据集,您应该考虑使用POST,这使您可以访问数据属性的使用, 或者通过在URL中传递data-params来发出GET请求。由于我不知道API,我无法为您做出选择。