JQuery 和 AJAX 發布到 php 而無需在 Wordpress 中重新加載頁面

Question

我正在 Wordpress 中開發一個插件，但在不重新加載頁面的情況下嘗試使用 Ajax 將數據發布到單獨的 PHP 文件時遇到了困難。 在后端，PHP 文件依賴if( isset() )來執行 SQL 查詢。 在客戶端，用戶應該看到單個記錄淡出和記錄已成功刪除的消息。

更新：到目前為止，javascript 正在運行，一旦單擊表單按鈕，正確的div -s 就會淡入淡出。 但是，如使用var_dump測試的那樣，PHP 文件沒有得到任何值。

HTML代碼：

<!-- problem: when setting "action" to a url, that page is automatically loaded. I want to stay on the existing page. -->
        <form action='' id='form-delete-assoc' method='post'>
    <input name='remove_all' type='submit' id='remove-all' value='Remove All'></input>
    </form>

JQUERY：（更新了回答者建議的一些修復程序）

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

<script type="text/javascript">
    $(document).ready(function(){
        $('tr.assoc_row').show();
        $('#settings-removed-msg').hide();
        $('#new-assoc-msg').hide();
        $('#formdeleteassoc').submit(function(e){
            e.preventDefault();

            $.ajax ({
                type: 'POST',
                url: '<?php echo $cb_t2c_remove_all_url; ?>',
                data: {removeall: 'yes'
                },
                success: function() {
                    $('#settings-removed-msg').fadeIn('fast');
                    $('tr.assoc_row').fadeOut('fast');
                    }
            });
        });

        $('#formsavesettings').submit(function(){
            $('#new-assoc-msg').fadeIn('fast');
            });
    });
</script>

remove_all.php:

<?php
//remove_all.php

global $wpdb;
$prefix = $wpdb->prefix;

$remove_var_dump = $_POST['removeall']; //returning NULL
var_dump($remove_var_dump);

if ( isset( $_POST['removeall'] ) ){
    $wpdb->query("DELETE FROM ".$prefix."cb_tags2cats");
    }

?>

Answer 1

就像其他人說的那樣，您需要return false或使用preventDefault() 。 您還應該將調用fadeOut和fadeIn到success回調中。 如果您不這樣做並且請求由於某種原因不成功，則用戶可能會誤以為它是成功的。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript"> 
    $(document).ready(function(){
        $('tr.assoc_row').show();
        $('#settings-removed-msg').hide();

        $('#form-delete-assoc').submit(function(e){

            // prevent the form from submitting normally
            e.preventDefault();

            $.ajax ({
                type: 'POST',
                url: '/delete-assoc.php', // Relative paths work fine
                data: { removeall: 'delete-all' },
                success: function(){
                  $('tr.assoc_row').fadeOut('slow');
                  $('#settings-removed-msg').fadeIn('slow');
                }
            });

        });
    });
</script>

Answer 2

您的表單提交事件需要返回 false，以阻止表單實際提交。

 $('#form-delete-assoc').submit(function(){
   ... rest of your code here...

   return false;
 }

Answer 3

要將數據發布到單獨的 php 頁面而不重新加載當前（父頁面或頂部）頁面，請創建一個隱藏的 iFrame 並將其用作提交目標。 這種類型的解決方案允許發布和檢索 json 響應。 此代碼段將文件上傳到 php 頁面。

<script type="text/javascript">
function init() {
    document.getElementById('file_upload_form').onsubmit=function() {
        document.getElementById('file_upload_form').target = 'upload_target'; //'upload_target' is the name of the iframe
    }
}
window.onload=init;
</script>
</head><body>
<form id="file_upload_form" method="post" enctype="multipart/form-data" action="upload.php">
<input name="file" id="file" size="27" type="file" /><br />
<input type="submit" name="action" value="Upload" /><br />
<iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>

本教程逐步解釋該過程-> http://www.openjs.com/articles/ajax/ajax_file_upload/

跟進如何解析響應 -> http://www.openjs.com/articles/ajax/ajax_file_upload/response_data.php

JQuery 和 AJAX 發布到 php 而無需在 Wordpress 中重新加載頁面

問題描述

3 個解決方案

解決方案1
2 已采納 2012-02-18 00:51:58

解決方案2
1 2012-02-18 00:34:02

解決方案3
0 2012-02-22 22:36:23

JQuery 和 AJAX 發布到 php 而無需在 Wordpress 中重新加載頁面

問題描述

3 個解決方案

解決方案1 2 已采納 2012-02-18 00:51:58

解決方案2 1 2012-02-18 00:34:02

解決方案3 0 2012-02-22 22:36:23

解決方案1
2 已采納 2012-02-18 00:51:58

解決方案2
1 2012-02-18 00:34:02

解決方案3
0 2012-02-22 22:36:23