wordpress - 使用 ajax 在帖子编辑页面上提交表单答案

【问题标题】：wordpress - using ajax to submit form on post edit pagewordpress - 使用 ajax 在帖子编辑页面上提交表单
【发布时间】：2013-11-07 11:49:30
【问题描述】：

我正在尝试了解 wordpress 中的基本 ajax 表单提交，以便从帖子编辑页面提交表单。请原谅新手发帖，但任何帮助或指点将不胜感激，因为我在这里迷路了，很多事情我不明白。我尝试了许多教程和示例，但无法让它们工作或使它们适应工作。要在下面做，我正在尝试在Submitting a form with ajax in Wordpress 上调整示例

基础 -

使用插件添加表单以发布编辑页面
通过ajax提交表单数据
使用 php 处理程序将数据插入数据库

我不想将数据提交到 post_meta 表，而是提交到自定义表。需要，因为应该有多个表单提交，即从帖子编辑页面多次提交相同的表单。

1.使用插件将表单添加到发布编辑页面

插件将表单添加到页面（来自上面的示例）

<div class="inside">
<form class="form" id="ajax-contact-form" action="#">                            
<input type="text" name="name" id="name"  placeholder="Name">
<button type="submit" class="btn">Submit</button>
</form>
</div>

但是这个表单嵌套在<form name="post" action="post.php" method="post" id="post"> 中。我希望表单与主 post 表单分开，因此用户只会提交 ajax-contact-form 数据，而不是完整的帖子数据。这是一个问题吗？我的直觉说是，但我不知道解决方案

2。通过ajax提交表单数据

在主插件 php 中添加了以下（也改编自示例）并将 ok 输出到管理头，但我不确定 add_action 钩子应该是什么。

add_action( 'admin_head', 'contact_form_javascript' );

function contact_form_javascript() {
?>
<script type="text/javascript" >
$('#ajax-contact-form').submit(function(e){
var name = $("#name").val();
$.ajax({ 
     data: {action: 'contact_form', name:name},
     type: 'post',
     url: ajaxurl,
     success: function(data) {
          alert(data); //should print out the name since you sent it along

    }
});

});
</script>

这似乎没有将数据传递给处理程序

3.使用 php 处理程序将数据插入数据库

我已经测试了下面的作品，通过改编 http://codex.wordpress.org/AJAX_in_Plugins 中的示例来插入确定。但是上面 javascript 的 ajax 数据似乎没有到达下面的处理程序。

add_action('wp_ajax_contact_form', 'contact_form');
add_action('wp_ajax_nopriv_contact_form', 'contact_form');

function contact_form()
{
global $wpdb;

$wpdb->insert( 
'ajaxtesttable', 
array( 
'col1' => $_POST["name"]
), 
array(
    '%s' 

) 
);

echo $wpdb->insert_id;
die();
}

我不认为处理程序有问题，处理程序似乎很容易。 我认为问题出在任何一个 -

编辑页面上的插件表单位置或 javascript 到 'ajax' 数据到 php 处理程序。

我在上面做的只是通过 ajax 向处理程序发送完整表单数据的小步骤。我真正想要的是将完整的表单数据发送到处理程序的javascript，通过序列化并传递它。一个简单的例子来说明如何做到这一点会很棒。

注意：我还尝试将内置的 jquery 表单处理程序加入队列，如下所示。这似乎是提交数据的简单方法。但我没有在源代码中看到下面的反映

//to enqueue the built in jquery-form of Wordpress

add_action( 'admin_enqueue_scripts', 'inputtitle_submit_scripts' );
function inputtitle_submit_scripts() {
wp_enqueue_script('jquery-form'); // it should load /wp-includes/js/jquery/jquery.form.js
}

add_action( 'admin_enqueue_scripts', 'inputtitle_submit_scripts2' );
function inputtitle_submit_scripts2() {
wp_enqueue_script( 'json-form' ); // it should load /wp-includes/js/jquery/jquery.form.js

对于上述长问题的任何帮助将不胜感激。谢谢你。

【问题讨论】：

第 1 部分不清楚，你是怎么做到的？这个表格的目的是什么？
形式的目标 该方案是评估培训课程，学生在其中返回关于他们对课程的意见的反馈表。因此，每门教学课程 = 一个 wp post ，并且一门课程可能会返回许多反馈表。所以例如 - course = 'Learn French' (a wp post) num feedback forms returned = 50 ('post meta' but wp post meta table not applicable) 表示提交 50 个与 'Learn French' 相关的表单。在这种情况下，管理员，而不是学生，输入表单数据，所以最好在 wp_admin 端做。
我为此尝试了“高级自定义字段”插件，因为它的中继器字段似乎很理想，但这会向服务器返回太多变量（例如，50 个表单，每个表单有 40 个问题 = 2000 个数据库插入）。否则 ACF 插件非常好。给定的数据量，任何时候只能提交一份反馈表。
Plugin 插件用add_meta_box() 放置表单，似乎没有将元框放置在主帖子表单之外的选项，目前我有 - add_action( 'add_meta_boxes', 'adding_custom_meta_boxes', 20, 2 );请参阅 - wproots.com/complex-meta-boxes-in-wordpress 也许还有另一个功能可用于将表单添加到管理员帖子编辑页面，但我找不到。

标签： jquery ajax wordpress

【解决方案1】：

我可以在钩子admin_head的代码中发现一个大问题：

缺少jQuery noConflict mode
在admin_footer 中打印更安全
只能在屏幕上打印post.php
只能以正确的帖子类型打印

add_action( 'admin_footer-post.php', 'contact_form_javascript' );

function contact_form_javascript() {
    if( 'post' != get_current_screen()->post_type )
        return;
    ?>
    <script type="text/javascript" >
    alert('Working only in the desired screen'); // Debug
    jQuery(document).ready(function($)
    {
        // Now it's safe to use $
        // And the code will be available when safe: document.ready
    });
    </script>
    <?php
}

然后，我会尽量避免放置 <form> 包装器，因为 WP 可能会与其自己的 publish-post 表单操作混淆。

【讨论】：