通过 AJAX 使用 PHP 发送表单而不刷新页面答案

【问题标题】：Sending form with PHP through AJAX with no page refresh通过 AJAX 使用 PHP 发送表单而不刷新页面
【发布时间】：2014-08-19 11:55:19
【问题描述】：

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

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;" 时，它可以工作了。我很困惑，我希望有任何帮助！

【问题讨论】：

既然您在#save-settings 上捕获点击事件，为什么不使用按钮输入而不是提交输入呢？这样您就不需要拦截标准行为，也不需要 onClick 处理程序。

标签： javascript php html ajax mysqli

【解决方案1】：

点击事件处理函数可以有事件参数。当你捕捉到这个参数时，你可以使用 preventDefault() 方法。使用这种方法会阻止默认的点击动作并且页面不会被刷新。

改变

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

到

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

【讨论】：

【解决方案2】：

您忘记包含后期保存设置。您可能应该像这样将它包含在 ajax 帖子中：

$.post("../lib/action.php", {
            'name': name,
            'charset': charset,
            'meta': meta,
            'save-settings': true,
            'description': description,
            'startsite': startsite,
            'starturl': starturl,
            'footer': footer
        },

在你的 sql 语句中更改这个以获取正确的帖子

 `name`='".escape($_POST['name'])."',
`charset`='".escape($_POST['charset'])."',
`meta`='".escape($_POST['meta'])."',
`description`='".escape($_POST['description'])."',
`startsite`='".escape($_POST['startsite'])."',
`starturl`='".escape($_POST['starturl'])."',
`footer`='".escape($_POST['footer'])."'
 WHERE `id`= 1";

【讨论】：

应该是'save-settings': true,，因为标识符中不允许使用-。
谢谢，它现在可以正常工作了......有点......成功消息显示但是mysql数据库更新为空条目......
为你编辑过改变它，你应该好好去@Dany
@SjoerdDeWit 非常感谢！顺便说一句，我对登录脚本使用相同的脚本，通过它处理密码是否安全？
应该没问题，javascript是客户端，所以只有用户应该能够看到它@Dany

【解决方案3】：

在 HTML 中写入 onclick="return false" 会取消 JavaScript 代码的执行。只需删除此onclick="..." 并像这样添加preventDefault() 以防止表单提交

$("#save-settings").click(function(e) {
   e.preventDefault();
   .....

【讨论】：