在wordpress中添加带有短代码的联系表单ajax - Add Contact form ajax with shortcode in wordpress

我正在使用ajax为我的联系人表单创建一个插件，并添加shortcode wordpress。我不知道如何做到这一点，而且它工作得很完美，我读了几个关于admin-ajax.php的论坛，但不知道如何将数据传递到这个文件。

这是代码：

<?php 
/*
Plugin Name: Formulario de contacto
Plugin URI: http://www.e-world.co
Description: Formulario de contacto con ajax
Version: 1.0
Author: Jorge Moreno
Author URI: http://www.e-world.co
license: GLP2
*/
function the_action_function(){
    $adminemail = "jorge.moreno@e-world.co";
                                if ($_GET['send'] == 'comments')
                                {
                                    $_uname = $_POST['name'];
                                    $_uemail = $_POST['email'];
                                    $_website   =   $_POST['website'];
                                    $_comments  =   stripslashes($_POST['comment']);

                                    $email_check = '';
                                    $return_arr = array();
                                    if($_uname=="" || $_uemail=="" || $_comments=="")
                                    {
                                        $return_arr["frm_check"] = 'error';
                                        $return_arr["msg"] = "Please fill in all required fields!";
                                    } 
                                    else if(filter_var($_uemail, FILTER_VALIDATE_EMAIL)) 
                                    {
                                    $to = $adminemail;
                                    $from = $_uemail;
                                    $subject = "Renew Email: " .$_uname;
                                    $message =  'Name: &nbsp;&nbsp;' . $_uname . '<br><br> Email: &nbsp;&nbsp;' . $_uemail . '<br><br> website: &nbsp;&nbsp;' . $_website .  '<br><br> Comment:&nbsp;&nbsp;' . $_comments;  
                                    $headers = "MIME-Version: 1.0'r'n";
                                    $headers .= "Content-type: text/html; charset=iso-8859-1'r'n";
                                    $headers .= "Content-Transfer-Encoding: 7bit'r'n";
                                    $headers .= "From: " . $from . "'r'n";
                                    @mail($to, $subject, $message, $headers);   
                                    } else {

                                    $return_arr["frm_check"] = 'error';
                                    $return_arr["msg"] = "Please enter a valid email address!";

                                }
                                echo json_encode($return_arr);
                                }
}
function createAjaxContactForm() {
    return '
                        <div class="form">
                            <form action="process.php" method="post" name="ContactForm" id="ContactForm" >
                                <div class="form-group">    
                                    <input type="text" class="form-control" name="name" placeholder="Full Name *">
                                </div>
                                <div class="form-group">    
                                    <input type="text" class="form-control" name="email" placeholder="Email *">
                                </div>
                                <div class="form-group">    
                                    <input type="text" class="form-control" name="website" placeholder="Website">
                                </div>
                                <div class="form-group">
                                    <textarea rows="5" class="form-control" name="comment" placeholder="Your Message *" style="height:175px;"></textarea>
                                </div>
                                <div id="message_post"></div>
                                <input class="btn btn-default" type="submit" value="ENVIAR" name="submitf" id="submitf">
                            </form>
                        </div>';
}
add_shortcode('AjaxContactForm', 'createAjaxContactForm');
 ?>

和我的ajax：

jQuery(function(){
    jQuery("#ContactForm").submit(function(){
        jQuery("#submitf").value='Please wait...';
        jQuery.post("password/wp-admin/admin-ajax.php", jQuery("#ContactForm").serialize(),
        function(data){
            if(data.frm_check == 'error'){ 
                    jQuery("#message_post").html("<div class='errorMessage'>ERROR: " + data.msg + "!</div>"); 
                    document.ContactForm.submitf.value='Resend >>';
                    document.ContactForm.submitf.disabled=false;
            } else {
                jQuery("#message_post").html("<div class='successMessage'>Your message has been sent successfully!</div>"); 
                jQuery("#submitf").value='Send >>';
                }
        }, "json");
        return false;
    });
});

这是一个ajaxurl，为您的主题/功能编写此代码。php

<?php function frontend_custom_ajaxurl() { ?>
    <script type="text/javascript">
        var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
    </script>
    <?php
  }
add_action('wp_head','frontend_custom_ajaxurl');

这是你的php函数，可以做任何事情。也可以在主题/函数.php文件中编写此代码

function your_function() {
    parse_str($_POST['data'], $params);
    print_r($params)
    exit;
}
add_action('wp_ajax_your_function', 'your_function');
add_action('wp_ajax_nopriv_your_function', 'your_function');

这是JQuery。

jQuery("#ContactForm").submit(function(event) {
    event.preventDefault();
    jQuery("#submitf").value = 'Please wait...';
    var data = {
        action: 'your_function', // here php function such as your_function
        data: jQuery("#ContactForm").serialize(),
    };
    jQuery.post(ajaxurl, data, function(response) {
        ......................
    });
});

有什么困惑的评论吗？

对于ajax使用以下代码：

在.php文件中使用以下代码，如果$不起作用，则将其替换为jQuery

$().ready(function() {
    var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
    $.post(
        ajaxurl, {
            'action': 'set_the_city',
            //pass all the parameter from the form in key value pairs here
        },
        function(output) {
            console.log(output)
        });
});

WordPress为ajax调用提供了一个钩子，而使用它。

add_action('wp_ajax_set_the_city', 'set_the_city');
add_action('wp_ajax_nopriv_set_the_city', 'set_the_city');
function set_the_city() {
    //all the data can be retrieved by $_REQUEST so do the coding for the_action_function() here.
}