Question

在这个项目中，我尝试在主php中使用Javascript中的url到Ajax，再到后端php调用getWeather.php。然后它将从网址中获取数据并将其返回给Javascript 但是我在Ajax发布后一直丢失变量（未定义）。因此，我打印出结果以查看，并发现当我尝试将php返回结果分配给Javascript变量时，Ajax返回值尚未完成。

在我的脚本中，单击按钮时：

 function post (inputString) {
        var result;
        var url ="http://api.openweathermap.org/data/2.5/weather?lat=42.5559287&lon=-92.84954249999998&lang=en&units=metric&appid=MY_API_KEY";

        $.post("getWeather.php",
        {
            postData: url,
        },
        function(data, status){
            alert("Data: " + data + "\nStatus: " + status);
            // console.log("Data: " + data + "\nStatus: " + status);
            //CONSOLE #1
            console.log("url Input: \n" + url + " \n\ndata : \n" + data);
            result = data;
        });
        //CONSOLE #2
        console.log("url Input: \n" + url + " \n\nResult : \n" + result);
    }

在获得postData的PHP中：

    $s = $_REQUEST['postData'];
echo getWeather_PHP($s);

function getWeather_PHP($url) {
    $contents = file_get_contents($url);
    $clima=json_decode($contents);
    $temp_max=$clima->main->temp_max;
    $temp_min=$clima->main->temp_min;
    $icon=$clima->weather[0]->icon.".png";
    //how get today date time PHP :P
    $today = date("F j, Y, g:i a");
    $cityname = $clima->name; 
    $date =  $cityname . " - " .$today . "<br>";
    $max = "Temp Max: " . $temp_max ."&deg;C<br>";
    $min =  "Temp Min: " . $temp_min ."&deg;C<br>";
    $output = $date." ".$max." ".$min;
    $output = (string)$output;
    // echo $output;
    return $output;
}

最后的结果是：最后的结果是： ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ //控制台＃2 网址输入： http：/ ..........

结果：未定义

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~

//控制台＃1 ajaxTest.php：24 url输入： http：/ ..........

数据：阿普灵顿-2018年10月1日，晚上8:12最高温度：13.9c最低温度：12c

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~

因此，CONSOLE＃2早于CONSOLE＃1完成所以看来我无法正确获得结果的错误？？？我该如何解决？还是有丘疹方法可以做同样的事情？

谢谢您的帮助

Answer 1

Ajax是异步的。这意味着代码执行将继续进行，而无需等待响应，因此将在CONSOLE＃1之前触发CONSOLE＃2的预期行为。请求完成后，将触发传递给$.post的回调函数，您应该使用它执行任何操作，具体取决于应该从请求接收的数据。如果由于某种原因导致请求失败，则添加一些错误处理也是一个好主意。您现在还可以在$.post中使用promise，这可以帮助您链接多个请求并轻松处理所有错误。有关-> https://api.jquery.com/jquery.post/

的更多详细信息

Answer 2

尝试将AJAX功能转换为promise。这样，您可以执行AJAX请求，等待获取数据，然后在代码中的其他地方使用它。

var promise = $.post("getWeather.php").done(function(data, err) {
  return data;
});

promise.then(function(data) {
  console.log(data)
});

Ajax流程订单

2 个答案: