如何让我的JS与服务器上的php对话？

Question

我正在尝试从我的本地机器向一个存放php文件的网站发出Ajax请求。站点中现在只有一个文件——php，当文件在同一个文件夹中时，它可以正常工作，但是当url指向我的web url时，它不会做任何事情。如何让我的JS与服务器上的php对话？我知道这个代码很烂，它这是我工作中的一个例子：

 $('#btn').click(function(){
            //pull vars 

            var username = $('#username').val();
            var password = $('#password').val();

            //request for username
            $.post("Main URL", {user:username,pass:password}).done(function(data){
                $("#loginMessage").html(data);
            }); 

        });

主机服务器上的PHP端：

if($_SERVER["REQUEST_METHOD"] == "POST")
{
    //assign vars after formatting to avoid a wrong login with correct 
    //username and password
    $username = trim($_POST["user"]);
    $password = trim($_POST["pass"]);

    //specfic message
    $errorMessage = "The username ".$username." or the password ".$password. " is wrong";
    $welcomeMessage = "Welcome ".$username;

    //user name or pass word is wrong invovke failure html
    if($password != "1234" || $username != 'Adin')
    {
        include("html.html");
        echo('<message>'.$errorMessage.'</message>');
    }

    //username and password is right invoke the html with proper messages
    if($password == "1234" && $username == "Adin")
    {
        include("html.html");
        echo('<message>'.$welcomeMessage.'</message>');
    }


}

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要使用JavaScript和PHP进行通信，你需要使用XMLHttpRequest对象来发送HTTP POST请求到你的服务器。以下是一个简单的示例：

首先，在你的HTML页面上添加一个按钮，点击后触发AJAX请求：

<button id="send">Send</button>

然后，在你希望处理返回数据的地方（比如<script>标签内）添加以下JavaScript代码：

var xhr = new XMLHttpRequest();

xhr.open('POST', 'http://your-server-url.php');  // 替换为你的服务器URL
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.onload = function() {
    if (this.status === 200) {
        console.log(this.responseText);  // 输出服务器响应的数据
    }
};

xhr.send('username=Adin&password=1234');

在这个示例中，我们创建了一个新的XMLHttpRequest实例，并设置了它的打开方式为POST。然后，我们将设置表单内容并将其传递给服务器。

注意：确保你的服务器支持POST方法，并且能够正确解析JSON格式的数据。否则，你可能需要修改你的PHP脚本以接受和解析JSON数据。

另外，为了使这段代码更安全，建议你在发送包含敏感信息的参数之前对其进行验证。例如，你可以检查用户输入是否包含特殊字符、空格或其他不安全的字符。