通過AJAX通過PHP發送表單，而無需刷新頁面

Question

因此，我有這段代碼可以使用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;" />

腳本

$(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!';
 }

由於我將所有"onclick"腳本都放在一個action.php文件中，因此我真的不想在腳本中將isset更改為empty 。 當我刪除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();

Answer 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";

Answer 3

在HTML中編寫onclick="return false"取消JavaScript代碼的執行。 只需刪除此onclick="..."並添加諸如此類的preventDefault()即可阻止表單提交

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