向 PHP 发送 AJAX POST 不起作用？答案

【问题标题】：Sending AJAX POST to PHP is not working?向 PHP 发送 AJAX POST 不起作用？
【发布时间】：2017-09-18 17:49:20
【问题描述】：

我发誓这之前工作正常，但现在情况并非如此，我显然搞砸了。

我正在制作一个表单，其中输入的信息通过 AJAX 发布到我的 PHP 文件中，该文件只输出用户名和密码。现在我什至将发送的数据硬编码为一个字符串，而 php 文件只是为了测试目的而打印它。但是，当我点击提交时，它并没有进入我的 loginProcess.php 页面，而是停留在页面上并打印到控制台“hello”、“success”和“test”，这表明它通过了完整的Process() 功能。

我的网址是正确的，并且与 index.html 文件位于同一目录中。我尝试了不同的方法，例如使用$.post() 或将提交按钮设置为type="input"。如果您看到form 行我在未注释之前注释掉，那是我试图直接发送数据而不通过ajax，它工作正常并输出loginProcess.php（但是我的项目需要通过ajax）。有谁知道怎么回事？

这是我的 html 文件：

<!DOCTYPE html>
<html>
<head>
   <!-- <script src="frontEnd.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>      
<title>Login System</title>
</head>
<style>
</style>

<body>
    <center>
        <p><b>LOGIN SYSTEM</b></p>
        <!-- <form id="login" action ="loginProcess.php" method="post">  -->
        <form name = "loginform">
            UCID:<br>
            <input type="text" name="username"><br>
            Password:<br>
            <input type="password" name="password"><br><br>
            <button type="button" onclick = "Process()">Submit</button>
        </form>
    </center>


</body>
 <script>
    function Process() {
        console.log("hello")
        var ucid = document.loginform.username.value;
        var pw = document.loginform.password.value;
        $.ajax({
            type:"POST",
            url: "loginProcess.php",
            data: "ajaxUCID=TESTUSERNAME",
            success: function(){
                console.log("success")
            },
            error: function(){
                console.log("error")
            }
        });
        // $.post("loginProcess.php",{ajaxUCID:"TESTUSERNAME"});
        console.log("test")
    }
 </script>

这是我的 loginProcess.php 文件：

<!DOCTYPE html>
<html>
<head><title>process</title></head>
<body>
<?php
$ucidPHP = $_POST["ajaxUCID"];
echo "Username is ".$ucidPHP;

// $pwPHP = $_POST["ajaxPW"];
// echo "Password is ".$pwPHP;
?>
</body>
</html>

【问题讨论】：

你得到的错误是什么？
把数据像 {"ajaxUCID":"TESTUSERNAME"};

标签： javascript php jquery html ajax

【解决方案1】：

试试这个 -

 <script>
    function Process() {
        var ucid = document.loginform.username.value;
        var pw   = document.loginform.password.value;
        $.ajax({
            type:"POST",
            url: "loginProcess.php",
            data: {ajaxUCID:TESTUSERNAME},
            success: function(){
                console.log("success")
            },
            error: function(){
                console.log("error")
            }
        });
    }
 </script>

希望这对你有用。

【讨论】：

【解决方案2】：

当您单击 Google chrome 或其他浏览器的等效网络选项卡，然后发送您的 Ajax 请求以观察您的数据包传递时，您有什么结果？

如果你有一个错误的数据包你能告诉我们一个女巫吗发帖。

之后，如果信息正确，数据结构正确，进行测试，我通常会执行以下代码来测试收到的整个帖子：

if(isset($_POST)){
  var_dump($_POST); // this will show all posts received 
}

让我知道它是否适合你;)

【讨论】：

【解决方案3】：

我不明白您的问题，代码正在与我一起工作并成功返回结果。

我认为您的意思是为什么返回的结果没有显示在表单的同一页面上。

这是正确的代码，下面是解释

index.php

    <!DOCTYPE html>
<html>
<head>
   <!-- <script src="frontEnd.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>      
<title>Login System</title>
</head>
<style>
</style>

<body>
    <center>
        <p><b>LOGIN SYSTEM</b></p>
        <!-- <form id="login" action ="loginProcess.php" method="post">  -->
        <form name = "loginform">
            UCID:<br>
            <input type="text" name="username"><br>
            Password:<br>
            <input type="password" name="password"><br><br>
            <button type="button" onclick = "Process()">Submit</button>
        </form>
    <div id="responseFromServer"></div>
    </center>


</body>
 <script>
    function Process() {
        console.log("hello")
        var ucid = document.loginform.username.value;
        var pw = document.loginform.password.value;
        $.ajax({
            type:"POST",
            url: "loginProcess.php",
            data: {"ajaxUCID":ucid},
            success: function(response){
        document.getElementById("responseFromServer").innerHTML =   response;
                console.log("success")
            },
            error: function(){
                console.log("error")
            }
        });
        // $.post("loginProcess.php",{ajaxUCID:"TESTUSERNAME"});
        console.log("test")
    }
 </script>

您提供的代码实际上可以正常工作，只是您没有选择将结果显示在您的页面上。这是通过添加div 来完成的，我将在其中放置响应。

    <div id="responseFromServer"></div>

在 ajax 调用的成功回调中，我刚刚捕获了从服务器发回的响应并将其放在 div 中，如下所示：

        document.getElementById("responseFromServer").innerHTML =   response;

应该可以的

更新#1： 他想重定向到php页面。

简而言之，当您想使用服务器、发送请求或获取结果而不重新加载页面时，您应该使用 ajax 请求，您可以在此处阅读更多信息Getting Starting with AJAX

AJAX 代表异步 JavaScript 和 XML。简而言之，就是使用 XMLHttpRequest 对象与服务器进行通信。它可以发送和接收各种格式的信息，包括 JSON、XML、HTML 和文本文件。 AJAX 最吸引人的特点是它的“异步”特性，这意味着它可以与服务器通信、交换数据和更新页面，而无需刷新页面。

所以在你想要重定向用户的情况下，你真的不想在这种情况下使用 ajax，你可以简单地使用普通的 html 表单标签来做到这一点。

一个表单标签可以有多个属性，这里我们关注2个：

动作
方法

以下是更新代码以获得结果的方法

第一：表单部分：

<form name = "loginform" method="POST" action="loginProcess.php">
            UCID:<br>
            <input type="text" name="ajaxUCID"><br>
            Password:<br>
            <input type="password" name="password"><br><br>
            <button type="submit" >Submit</button>
        </form>

我添加了2个属性，分别是：

方法：我将其设置为 POST，因为这是您在服务器上接受的 http 请求类型 [您使用的 PHP 文件 $_POST]。
action：我将它设置为应该接收您的请求的文件的相对路径，在我们的例子中是“loginProcess.php”

然后我将输入用户名或 UCID 的输入名称更改为与您在 PHP 文件中收到的名称相同。在您的 php 中，您接受了一个请求参数 $_POST["ajaxUCID"] 这意味着您正在接受一个 POST 请求并且您需要一个名为 ajaxUCID 的参数，它必须是输入的名称。这就是我这样做的原因<input type="text" name="ajaxUCID">

我还停止了按钮上的 onClick 操作以阻止 ajax 请求，我还将其类型更改为“提交”，以便一旦单击它，它将自动为您提交表单。

希望对您有所帮助，如果您需要进一步的帮助，请发表评论

【讨论】：

嗯，确实有效，它在我必须突出显示的黑框中显示输出。这是截图gyazo.com/ed20dd5b552ea6ccc274e28df0122d2d。但这是我的预期输出，它将转到我的 loginProcess.php 拥有的页面。这是我跳过 AJAX 请求并在按钮提交时直接转到 loginProcess.php 时的样子（我对 AJAX 的期望也是如此）gyazo.com/168bf78fc5c0021f03379ce9e0266713
那个黑框是因为我的 div 风格化了（对此感到抱歉），但无论如何我认为它会像我在第二个屏幕截图中那样使用那个字符串进入一个新页面？
请看，简而言之，只有当您打算向服务器发送请求并在同一页面上获取结果时才应使用 ajax 请求，但如果您打算重定向用户转到另一个页面，然后您只需将 action 属性放在表单请求上。我会更新答案，让你明白这一点