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

【问题标题】：JQuery and AJAX post to php without reloading page in WordpressJQuery 和 AJAX 发布到 php 而无需在 Wordpress 中重新加载页面
【发布时间】：2012-02-18 00:26:14
【问题描述】：

我正在 Wordpress 中开发一个插件，但在尝试使用 Ajax 将数据发布到单独的 PHP 文件而不重新加载页面时遇到了困难。在后端，PHP 文件依赖if( isset() ) 执行 SQL 查询。在客户端，用户应该会看到各个记录淡出和一条记录已成功删除的消息。

更新：到目前为止，javascript 工作正常，单击表单按钮后，正确的div-s 淡入淡出。但是，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");
    }

?>

【问题讨论】：

尝试添加return false;在你的 Ajax 调用之后。

标签： php jquery ajax wordpress post

【解决方案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>

【讨论】：

谢谢！我会去做的。我想知道我是否在插件中过早地阐明了我的 JQuery。也许它没有向 $_POST['form-delete-assoc'] 传递任何东西，因为脚本在表单之前。另外，您是否知道我是否需要在 Wordpress 中使用完整的 url 进行发布操作，还是会假设 delete-assoc.php 位于同一文件夹中？再次感谢。
谢谢史蒂夫。刚刚看到您对相对路径的评论。
如果您使用submit，则脚本必须在表单呈现后出现。但是，如果您使用.on( 'click' '#form-delete-assoc', function(){} )，从哪里调用脚本（在呈现表单之前或之后）并不重要：api.jquery.com/on

【解决方案2】：

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

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

   return false;
 }

【讨论】：

这解决了第一个问题，即当我不想加载表单时。谢谢！唯一的另一个问题是 php 文件中的 $_POST 变量未设置。我试图将它与表单 ID（即 if(isset($_POST['form-delete-assoc'])) ）和输入 ID（即 if(isset($_POST['form-delete-assoc '])) )，两者都不起作用。在使用 ajax 设置 $_POST 变量和实际检查它是否在 php 中设置之间的某个地方，信息没有被发送。
JQuery 不会自动将表单数据放入 ajax 请求中。您必须自己手动完成，将其添加到发送到 ajax 调用的 data 值中。
因此脚本显示 ajax 调用手动设置数据，标签为“removeall”，值为“yes”。然而，在 isset ( $_POST['removeall'] ) 上触发的 PHP 代码没有执行：if ( isset( $_POST['removeall'] ) ){ $wpdb->query("DELETE FROM ".$prefix."cb_tags2cats"); }

【解决方案3】：

要在不重新加载当前（父或顶部）页面的情况下将数据发布到单独的 php 页面，请创建一个隐藏的 iFrame 并将其用作提交目标。这种类型的解决方案允许发布和检索 json 响应。这个 sn -p 将文件上传到 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

【讨论】：