Question

我正在尝试了解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给admin标题，但我不确定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

对上述长期问题的任何帮助都将非常感谢。谢谢。

Answer 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表单操作混淆。

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

1 个答案: