如何使用ajax提交wordpress表单(文件和名称)

时间:2016-12-25 06:08:25

标签: php jquery ajax wordpress

我是新开发者。我已经为数据插入WP仪表板创建了一个插件。我想在我的数据库中插入图像。我试图在WordPress中使用Ajax形成提交。有我的代码。当我使用input type = text data提交成功时,但是当我使用input type = file时,数据未提交。我希望所有数据都插入到我的数据库中,文件保存在上传文件夹中。

 <form  id="ajax_form" method="" action="<?php echo $_SERVER['REQUEST_URI']; ?> " enctype="multipart/form-data">
            <table class='wp-list-table widefat fixed'>
                <tr>
                    <th class="ss-th-width">Code</th>
                    <td><input type="text" name="code" value="<?php echo $code; ?>" class="ss-field-width" /></td>
                </tr>
                <tr>
                    <th class="ss-th-width">School</th>
                    <td><input type="text" name="name" value="<?php echo $name; ?>" class="ss-field-width" /></td>
                </tr>
                <tr>
                    <th class="ss-th-width">Image</th>
                    <td><?php wp_nonce_field('ajax_file_nonce', 'security'); ?>
                        <input type="hidden" name="action" value="my_file_upload">
                        <label for="file_upload">It's a file upload...</label>
                        <input type="file" name="file_upload">
                    </td>
                </tr>
            </table>
            <input type='submit' name="insert" value='Save' class='button'>

        </form>

Ajax代码在这里:

jQuery('#ajax_form').submit(ajaxformdata);   

    function ajaxformdata()
    {    
        var alldata = jQuery(this).serialize();    

        jQuery.ajax({  
            type:"POST",  
            //url: "/wp-admin/admin-ajax.php?action=signup", 
            url: "/mywp/wp-admin/admin-ajax.php?action=cruddata",                   
            data: alldata,  
            success:function(data)
            {
                alert('Data submited');
            },

            error: function(errorThrown)
            {
                alert(errorThrown);
            }  
        });    

        return false;  
    }  

PHP代码在这里

<?php
function cruddata()
    {
        global $wpdb;
        $code = $_POST["code"];
        $name = $_POST["name"];
        $imagesss = basename($_FILES["photo"]["name"]);
        $table_name = $wpdb->prefix . "school";

        $wpdb->insert(
             $table_name, //table
            array
                (
                    'code' => $code, 
                    'name' => $name
                    //'image_name' => $imagesss
                );
        $message.="Data inserted";
        }

    add_action( 'wp_ajax_cruddata', 'cruddata' );

1 个答案:

答案 0 :(得分:2)

试试这个 - 在你的JS上你的网址应该是ajaxurl,行动应该是cruddata希望这样可以正常工作。

注册执行功能的方法

add_action('wp_ajax_cruddata', 'cruddata');
add_action('wp_ajax_nopriv_cruddata', 'cruddata');

你的职能定义 -

function cruddata() {
   // code goes here...
}

使用Javascript:

jQuery.ajax({
    data: {
        'action': 'cruddata',
    },
    dataType: 'json',
    type: 'post',
    url: ajaxurl,
    beforeSend: function () {
        //
    },
    success: function (data) {
        //
    }    
});