Question

我正在使用Wordpress开发一个插件，我很难尝试使用Ajax将数据发布到单独的PHP文件而无需重新加载页面。在后端，PHP文件依赖if（isset（））来执行SQL查询。在客户端，用户应该看到单个记录fadeOut和一条记录已成功删除的消息。

更新：javascript正在工作，只要单击表单按钮，正确的div就会淡入淡出。但是，正如使用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

您的表单提交事件需要返回false，以阻止表单实际提交。

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

   return false;
 }

Answer 2

与其他人说的一样，您需要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 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>

本教程逐步解释了该过程 - ＆gt; http://www.openjs.com/articles/ajax/ajax_file_upload/

跟进如何解析响应 - ＆gt; http://www.openjs.com/articles/ajax/ajax_file_upload/response_data.php

JQuery和AJAX发布到PHP而无需在Wordpress中重新加载页面

3 个答案: