2

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

基本 -

  1. 使用插件将表单添加到发布编辑页面
  2. 通过ajax提交表单数据
  3. 使用 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中的示例测试了以下工作以插入 ok 。但是来自上面 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

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

4

1 回答 1

1

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

  • 它缺少jQuery noConflict 模式
  • 打印这个更安全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
}

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

于 2013-10-29T09:48:50.983 回答