javascript - 通过 AJAX 使用 PHP 发送表单，无需刷新页面

Question

所以我有这段代码可以使用 PHP 和 AJAX 发布数据而无需重定向页面，我在登录页面上使用相同的脚本。登录页面的工作方式就像一个魅力，但其他页面则不然。它们之间唯一的区别是登录 php 脚本页面使用 if (empty($_POST) === false) {} 而其他页面使用 if (isset($_POST['save -设置'])) {}。我不知道该怎么办..下面是我正在使用的脚本。

HTML 按钮

<input id="save-settings" class="submit" type="submit" name="save-settings" value="Save" onclick="return false;" />

JS 脚本

$(document).ready(function() {
        $("#save-settings").click(function() {
            var name        = $("#webname").val();
            var charset     = $("#webchar").val();
            var meta        = $("#webmeta").val();
            var description = $("#webdesc").val();
            var startsite   = $("#webstartsite").val();
            var starturl    = $("#webstartsiteurl").val();
            var footer      = $("#webfooter").val();

            $.post("../lib/action.php", {
                name: name,
                charset: charset,
                meta: meta,
                description: description,
                startsite: startsite,
                starturl: starturl,
                footer: footer
            }, function(data) {
                $("#gy-main-notification-bar").hide().html("<h1>!</h1><h2>" + data + "</h2>").slideDown(500);
                setTimeout(function() { $("#gy-main-notification-bar").slideUp(500) }, 2500);
            });
        });
    });

PHP 脚本

if(isset($_POST['save-settings'])) {
    $updatesettings = "UPDATE `settings` SET
    `name`='".escape($_POST['webname'])."',
    `charset`='".escape($_POST['webchar'])."',
    `meta`='".escape($_POST['webmeta'])."',
    `description`='".escape($_POST['webdesc'])."',
    `startsite`='".escape($_POST['webstartsite'])."',
    `starturl`='".escape($_POST['webstartsiteurl'])."',
    `footer`='".escape($_POST['webfooter'])."'
     WHERE `id`= 1";

     if ($update_settings = $db_connect->query($updatesettings)) {}
     echo 'Success!';
 }

我真的不想将脚本中的 isset 更改为 empty，因为我拥有所有 “onclick”一个 action.php 文件中的脚本。当我从输入中删除 onclick="return:false;" 时，它起作用了..我很困惑，我感谢任何帮助!

Answer 1

点击事件处理函数可以有事件参数。当您捕获此参数时，您可以使用 PreventDefault() 方法。使用此方法将阻止默认的单击操作，并且页面不会刷新。

改变

$("#save-settings").click(function() {
        var name        = $("#webname").val();

至

$("#save-settings").click(function(ev) {
        ev.preventDefault();
        var name        = $("#webname").val();