Ajax 调用 php curl 产生未定义

Question

Api: http://api.geonames.org/findNearbyPlaceNameJSON?formatted=true&lat=47.3&lng=9&username=sherazzi403&style=full

文件：index.html - 简单的 2 输入 #lat for &lng= 和 #lng for &lng= 按钮用于 ajax 到运行 post 请求到 findnearbyplacename.php.

script.js: ajax post 使用 2 个数据字段调用。

  $('#btnRun').click(function() {

    // alert("Hello");
     lat = $('lat').val();
      lng = $('lng').val();
    $.ajax(
      {
        method: "POST",
        url: "libs/php/findnearbyplacename.php",
        data: {
          lat: $('#lat').val(),
          lng: $('#lng').val(),
        },
        success: function(result){
          console.log(result['data']);

          $('#div1').html(result['data'][0]['distance'])
        },
         error: function(jqXHR, textStatus, errorThrown){
          // error code
          console.log("we have reached error ");
          console.log(lat, lng);

         }
      });
  });

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> Find Nearby Place Names </title>
    <meta name="author" content="Hafizullah Karim" >
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>


  </head>
  <body>
    <input type="number" id="lat" name="lat">
    <input type="number" id="lng" name="lng">

    <button id="btnRun">Run</button>
    <br>
    <div id="div1"> </div>

    <script> console.log($('lat').val())</script>

    <script type="text/javascript" src="script.js"></script>

  </body>
</html>

findnearbyplacename.php - php curl 从上面提到的 api 中获取一个 json 对象。

完整代码在这里 https://github.com/Connector403/stage4/tree/master

   <?php
$lat = $_REQUEST['lat'];
 $lng = $_REQUEST['lng'];
 $url = 'http://api.geonames.org/findNearbyPlaceNameJSON?formatted=true&lat'.$lat.'&lng='. $lng.'&username=sherazzi403&style=full';
 // initialize the resource
 $ch = curl_init();

 curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false );
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
 curl_setopt($ch, CURLOPT_URL, $url);
 
 // curl_setopt($ch, CURLOPT_POSTFIELDS)
 $result = curl_exec($ch);
 
 curl_close($ch);
 // api returns data as json
 // decode the json as an associative array so that we can append it to the $output
 $decode = json_decode($result,true);

 // the 'geonames' properrty from the serialized JSON is store into the 'data'
 // element of $output
 $output['data'] = $decode['geonames'];
 // the correct header information for json is set and $output is converted to jsobn before send it
 header('Content-Type: application/json; charset=UTF-8');
 echo json_encode ($output);

Answer 1

您的问题源于发送给 GeoNames API 的 lat 参数中缺少 =。

$url = 'http://api.geonames.org/findNearbyPlaceNameJSON?formatted=true&lat'.$lat.'&lng='. $lng.'&username=sherazzi403&style=full';
                                                                                ^ 
                                                                           = missing here

使用浏览器调试工具的“网络”选项卡，您会看到从 API 返回的响应仅包含一条简单消息：缺少参数。添加 = 并返回正确的结果。

由于您没有得到预期的响应，因此您要查找的密钥不存在，因此出现 undefined 消息。您应该在此处添加一些错误检查。

此外，如评论中所述，您在几个 jQuery 调用中缺少前导 # 但这不会影响结果，因为您已将其正确放置很重要。

您的 data 对象中还有一个尾随逗号 (,)，但这不会影响 Firefox。

Ajax 调用 php curl 产生未定义

Ajax call to php curl produce undefined

html

php

ajax

jquery

php-curl