Question

我们正尝试从本地的index.html调用，这是一个托管在webhost000上的简单PHP文件，用于接收响应。 PHP文件是：

<?php
if (isset($_POST['name'])) {
    $name = $_POST['name'];
    echo ($name);
}
?>

我们想在html.index中的文本框中输入一个字符，并从php接收相同的字符作为响应。我们使用ajax调用在html文件中执行此操作：

<script>
    $(document).ready(function() {
        $('#name').keyup(function() {   
        var name = $('#name').val();        
        var request = $.ajax({
              url: "https://nedo93.000webhostapp.com/phpdemo.php",                
              method: "POST",
              data: { name : name },
              dataType: "html"
            });

            request.done(function( msg ) {
              alert( "Request done: " + msg );
            });

            request.fail(function( jqXHR, textStatus ) {
              alert( "Request failed: " + textStatus );
            });         
        });
    });         
    </script>

（剩下的html应该不重要，它可以很好地工作，测试和重新测试）

如果我们尝试调试此操作，我们可以看到找到该文件，请求已发送，但我们无法收到回复：screenshot

如果我们使用this浏览器功能，我们可以发送数据并毫无问题地收到回复，但不知道这是否有帮助。

如果你能回答这个问题，请提前感谢。

Answer 1

这是因为您的PHP脚本托管在不同的服务器上，而您的AJAX调用代码位于本地。

为了运行AJAX，存在同源策略。在此策略下，Web浏览器允许第一个Web页面中包含的脚本访问第二个Web页面中的数据，但前提是两个Web页面具有相同的源（两者都在同一个域中）。 Read more about same origin policy here.

同源策略阻止某些Ajax技术跨域使用，尽管W3C有一个XMLHttpRequest对象的草案可以启用此功能。存在通过使用在页面中嵌入作为iframe的特殊跨域通信通道，或通过使用JSONP，websockets，跨域消息传递或cross-domain resource sharing来回避此安全功能的方法。

因此，简而言之，您将无法访问驻留在000webhost服务器上的PHP请求，无法使用本地的AJAX代码进行访问。

您也可以在同一个000webhost域上托管AJAX代码，或者在运行PHP代码的000webhost域上启用跨域资源共享。

据我所知，000webhost是一个免费的服务器，并不支持这些更改。所以你必须得到一个更好的服务器或在本地测试这一切。

正如您在查询中提到的，所有HTTP请求（如GET，POST，PUT）都可以跨域运行。但是对于AJAX来说，不是那么直截了当。

希望这有帮助！

Answer 2

使用json_encode

你的代码应该是......

<?php
if (isset($_POST['name'])) {
    $name = $_POST['name'];
    header('Content-Type: application/json'); //just used as info for your application
    echo json_encode($name); //encode to JSON object
}
?>

之后执行JQuery验证以检查Json回复（特别是出于错误）。

如何ajax调用托管在远程服务器上的php文件并收到响应？

2 个答案: