时间戳

首页 > 解决方案 > WordPress中的Ajax插入数据库返回404错误

php - WordPress中的Ajax插入数据库返回404错误

问题描述

我正在尝试通过 ajax 在数据库中插入简单的表单，而不在 Wordpress 中刷新页面。

出于某种原因，当我单击提交按钮时，我发现找不到该页面 - 404 错误。

我已将此添加到我的主题中function.php

add_action('wp_enqueue_scripts', 'my_ajax_scripts'); 
function my_ajax_scripts(){
    wp_enqueue_script( 'myscript', get_template_directory_uri().'/assets/js/formSubmit.js', array('jquery'), '1.0', true );
    wp_localize_script( 'myscript', 'myajax', array( 'ajaxurl' =>   admin_url( 'admin-ajax.php' ) ) );
}

function applyform(){
        global $wpdb;
        $table = jobs;
        $data = array(
            'name' => $_POST['name'],
            'email'    => $_POST['email'],
            'form_id'    => $_POST['form_id']
        );
        $format = array(
            '%s',
            '%s',
            '%s'
        );
        $success=$wpdb->insert( $table, $data, $format );
        if($success){
            //wp_redirect( site_url('/') );
            die;
        }
}

//ADD THE AJAX HOOKS IN WORDPRESS
add_action('wp_ajax_applyform', 'applyform');
add_action('wp_ajax_nopriv_applyform', 'applyform');

然后我有这个formSubmit.js

jQuery(document).ready(function($){ 

    $('#submit').submit(function(e){ // Updated            

        var applicantform = $(this).serialize(); // serializing the form data

        e.preventDefault();

        //ajax call
        $.ajax({
            type:   'POST', 
            action: 'applyform', 
            url:    myscript.ajaxurl, // the functional url     
            data:   myscript.applyform, // all the data of the form (serialized)

            // Displaying succes message
            success: function( data ){
                $('#result').html( 'Success : '.data );
                // for debugging purpose in browser js console
                console.log(data);
            },

            // Displaying error message     
            error: function( error ){
                $('#result').html( 'Error! : '. error );
                // for debugging purpose in browser js console
                console.log(error);
            }               
        });
    });
});

这是页面上模态窗口中的表单

<form method="post" id="applicantform">
     <input type="text" name="name" placeholder="Nmae" />
     <input type="hidden" name="form_id" value="<?php echo $post->ID; ?>">
     <input type="email" name="email" placeholder="Email" />
     <input type="submit" name="submit" id="submit" value="Send" />
</form>

我在控制台日志中看不到任何内容。不是console.log(data)也不是console.log(error)。在表单提交时，它直接进入未找到的页面。

标签： phpwordpress

解决方案

试试这个。您不是通过定位提交来序列化表单数据。

$('#applicantform').submit(function(e){        

    var applyformData = $(this).serialize(); // serializing the form data

    e.preventDefault();

    //ajax call
    $.ajax({
        type:   'POST', 
        url:    myajax.ajaxurl, // the functional url     
        data:   {
            data: applyformData, // all the data of the form (serialized)
            action: 'applyform',
          } 

        // Displaying succes message
        success: function( data ){
            $('#result').html( 'Success : '.data );
            // for debugging purpose in browser js console
            console.log(data);
        },

        // Displaying error message     
        error: function( error ){
            $('#result').html( 'Error! : '. error );
            // for debugging purpose in browser js console
            console.log(error);
        }               
    });
});

推荐阅读