Question

我有一个页面user.php，可以通过点击另一页user.php上的按钮来访问该页面。 finduser.php是一个简单的表单，它从最终用户获取一些参数，提交到user.php，将该用户附加到列表中。

<form action="finduser.php" method="post"> <input type="text" name="username" required="required"/> <input type="submit" value="Find User"/> </form>

finduser.php

<?php //session start is on another page included on every page $theUser = $_POST["username"]; if (!isset($_SESSION["users"])) { $_SESSION["users"] = array(); } else { $_SESSION["users"][] .= $theUser; } ?>

user.php

UX处理的方式是您从finduser.php开始，提交表单并导航到finduser.php，但如果您要继续搜索用户，则需要按回并重新提交表单。我想要一种不重定向表单提交的方法，但仍然可以在user.php上执行代码。

我注意到一些网站使用类似的概念将商品添加到购物车。有些网站会在添加内容时将您重定向到购物车，但有些会在不中断用户体验的情况下停留在同一页面上。一个小方框可能会显示“x已添加到购物车”，这样您就可以将同一页面中的多个内容添加到购物车，但不会看到购物车。

我怎样才能做到这一点？重申我正在尝试做的事情：

用户在finduser.php
用户按下提交，执行user.php中的PHP
可能会出现一个方框“[名称]已添加到列表中”
没有页面重定向

我可以做类似下面的事情：

<?php //session start is on another page included on every page if ((sizeof($_POST) == 1) && isset($_POST["username"])) { $theUser = $_POST["username"]; if (!isset($_SESSION["users"])) { $_SESSION["users"] = array(); } else { $_SESSION["users"][] .= $theUser; } } <form action="user.php" method="post"> <input type="text" name="username" required="required"/> <input type="submit" value="Find User"/> </form> ?>

{{1}}

这样只需要一个页面，但它仍然需要重定向（自身），并且当有人刷新页面时容易中断。

Answer 1

您需要使用AJAX来处理PHP代码并返回结果。这是使用jQuery's AJAX handler的选项：

# File: yourform.html
<form action="finduser.php" id="findUserForm" method="post">
    <input type="text" name="username" required="required"/>
    <input type="submit" value="Find User"/>
    <div class="messages"></div>
</form>

<script type="text/javascript">
$(document).ready(function() {
    $('#findUserForm').submit(function(e) {
        // Stop the regular post action
        e.preventDefault();
        var $form = $(this);

        // Define the request that should happen instead
        $.ajax({
            url: $form.attr('action'),
            method: $form.attr('method'),
            dataType: 'json',
            data: {
                username: $('input[name="username"]').val()
            }
        }).done(function(result) {
            // Append the results to the messages div
            $('.messages').append('<p>' + result.message + '</p>');
        });
    });
});
</script>

然后你的后端脚本来处理用户名：

# File: finduser.php
<?php

session_start();

if (isset($_POST['username'])) {
    // do your processing...
    if (empty($_SESSION['users'])) {
        $_SESSION['users'] = [];
    }
    // Add it to the array
    $_SESSION['users'][] = trim($_POST['username']);
    // do more processing?
    // Return a result
    echo json_encode(
        'success' => true,
        'message' => $_POST['username'] . ' was successfully added!'
    );
    exit;
}

// Handle errors!
echo json_encode(
    'success' => false,
    'message' => 'No username was posted.'
);

我没有测试过这个，但是想法是你告诉jQuery覆盖它处理提交表单的默认方式，而是应该通过AJAX将用户名发送到finduser.php。该脚本将执行您告诉它的操作，将用户添加到会话数组，然后输出JSON结果消息。 jQuery的.done()事件然后处理结果消息并将消息添加到.messages div。

您可以使用success => bool选项控制消息的显示方式，例如：

.done(function(result) {
    var $elem = $('<p></p>');
    // Add a CSS class for display
    if (result.success) {
        $elem.addClass('success');
    } else {
        $elem.addClass('error');
    }
    // Append the results to the messages div
    $elem
        .html(result.message)
        .appendTo($('.messages'));
});

然后像这样添加一些CSS：

.success {
    color: green;
}

.error {
    color: red;
}

理论上，您的结果消息应该是彩色编码。

按下按钮执行PHP代码，无需离开页面

1 个答案: