JQuery和AJAX發佈到PHP無需重新加載頁面在WordPress中

我正在開發一個WordPress插件，並且難以嘗試使用Ajax將數據發佈到單獨的PHP文件而無需重新加載頁面。在後端，PHP文件依靠if（isset（））來執行SQL查詢。在客戶端，用戶應該看到單個記錄fadeOut和記錄被成功刪除的消息。JQuery和AJAX發佈到PHP無需重新加載頁面在WordPress中

更新：JavaScript的工作範圍內，一旦表單按鈕被點擊，正確的div淡入和淡出。但是，PHP文件沒有得到任何值，如var_dump所測試的。

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"); 
    } 

?>

來源

2012-02-18 ChrisBuck

嘗試增加回報虛假的;在你的Ajax調用之後。 – akiller 2012-02-18 00:29:43

像別人說的，你需要或者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>

來源

2012-02-18 00:51:58 Steve

謝謝！我會去做。我想知道是否在插件中提到了我的JQuery。也許它不會傳遞任何東西給$ _POST ['form-delete-assoc']，因爲腳本在表單之前。另外，你是否有任何想法，我是否需要在Wordpress中使用完整的url後操作，或者它會假設delete-assoc.php在同一個文件夾中？再次感謝。 – ChrisBuck 2012-02-18 01:26:15

謝謝史蒂夫。剛剛看到您對相對路徑的評論。 – ChrisBuck 2012-02-18 01:29:39

如果您使用'submit'，那麼腳本必須在表單呈現後纔會出現。但是，如果您使用'.on（'click''＃form-delete-assoc'，function（）{}）'從腳本被調用的位置（在表單呈現之前或之後）：http ：//api.jquery.com/on/ – Steve 2012-02-18 06:31:39

你的表單提交事件NE編輯返回false，以阻止實際提交表單。

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

    return false; 
}

來源

2012-02-18 00:34:02

這解決了第一個問題，當我不想要的時候讓表單加載。謝謝！唯一的另一個問題是php文件中的$ _POST變量沒有設置。我嘗試將它綁定到表單ID（即if（isset（$ _ POST ['form-delete-assoc']）））和輸入ID（即if（isset（$ _ POST ['form-delete-assoc ']））），並且都不起作用。在使用ajax設置$ _POST變量和實際檢查它是否在php中設置之間的某處，信息沒有被髮送。 – ChrisBuck 2012-02-18 00:52:02

JQuery不會自動將表單數據放入ajax請求中。您必須自己手動完成，方法是將其添加到發送給ajax調用的「data」值中。 – 2012-02-25 22:09:43

因此，腳本顯示ajax調用手動設置數據的標籤爲'removeall'，值爲'yes'。然而，在isset（$ _POST ['removeall']）上觸發的PHP代碼沒有執行：'if（isset（$ _POST ['removeall']））{wpdb-> query（「DELETE FROM」）。 $前綴「cb_tags2cats」）。 }' – ChrisBuck 2012-02-27 22:45:50

發佈數據到一個單獨的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

來源

2012-02-22 22:36:23

JQuery和AJAX發佈到PHP無需重新加載頁面在WordPress中

回答

相關問題