Question

我试图在我的PHP文件中使用Ajax接受来自表单的输入并返回数据，然后使用Ajax接收并以HTML显示。我收到的数据是正确的，但显示不正确，有时，我还会收到随机的成功字符串，该字符串也会显示出来。这是我的代码。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">

function ajax_post(){
    $.post("server.php", { 
        username: $("#userName").val(),
        password: $("#userPass").val() 
    }, 
    function(username,pass) {
    $("#username").html(username);
    $("#pass").html(pass);
    });
}


</script>
</head>
<body>
<h2>Ajax Post to PHP and Get Return Data</h2>
Username: <input id="userName" name="userName" type="text">  <br><br>
Password: <input id="userPass" name="userPass" type="password">  <br><br>
<input name="myBtn" type="submit" value="Check" onclick="ajax_post()"> <br><br>
<p id="username" style="color:red"></p><br><br>
    <p id="pass" style="color:red"></p>
</body>
</html>

server.php：

<?php 
if(!empty($_POST['username'])){
        $username = $_POST['username'];
        $pass = $_POST['password'];
        echo 'You are now registered,' . $username;
        echo 'Password: ' . $pass;
}
?>

这是运行index.php文件并填写表格后得到的结果的屏幕截图，我要做的是在用户名段落中显示返回的用户名数据，在密码段落中显示密码，再次，我不知道“成功”是从哪里来的。

Answer 1

一种简单的方法是将回显的数据放入JSON格式的数组中，如下所示：

    echo json_encode([
        'msg' => 'You are now registered,' . $username,
        'username' => $username,
        'pass' => $pass
    ]);

您的帖子请求应如下所示：

    $.post("server.php", {
      username: $("#userName").val(),
      password: $("#userPass").val()
    }, function(data) {
      var returnedData = JSON.parse(data)
      $("#username").html(returnedData.username);
      $("#pass").html(returnedData.pass);
    });

注意：不要忘记将JSON数组解析为javascript可以使用JSON.parse(data)读取的内容

Answer 2

您可以从PHP返回json，然后在js中使用它。
因此，在PHP文件中，您将：

<?php 
if (!empty($_POST['username'])) {
    $username = $_POST['username'];
    $pass = $_POST['password'];

    // Here you return json
    echo json_encode([
        'msg' => 'You are now registered,' . $username,
        'username' => $username,
        'pass' => $pass
    ]);
}
?>

在html文件中，您将拥有：

$.post("server.php", { 
    username: $("#userName").val(),
    password: $("#userPass").val() 
}, function(data) {
    $("#username_1").html(data.username);
    $("#pass_1").html(data.pass);
});

注意
您不需要从服务器返回用户名和密码，因为它们只是您输入的内容。我编写代码作为使用json的示例。

已更新
您还需要与此同时更改HTML：

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
    $( document ).ready(function() {
        $('#myBtn').click(function() {
            $.post("server.php", {
                username: $("#userName").val(),
                password: $("#userPass").val()
            }, function(data) {
                $("#username_1").html(data.username);
                $("#pass_1").html(data.pass);
            });
        }):
    });
    </script>
    </head>
    <body>
        <h2>Ajax Post to PHP and Get Return Data</h2>
        Username: <input id="userName" name="userName" type="text">  <br><br>
        Password: <input id="userPass" name="userPass" type="password">  <br><br>
        <input name="myBtn" type="button" value="Check" id="myBtn"> <br><br>
        <p id="username_1" style="color:red"></p><br><br>
        <p id="pass_1" style="color:red"></p>
    </body>
</html>

在PHP文件中使用Ajax发送和接收多个数据

2 个答案: