Php 数据库中的Ajax插入在WordPress中返回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>

试试这个。您没有通过以提交为目标序列化表单数据

$('#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);
        }               
    });
});

首先，检查ajax调用结构

要使此ajax调用工作，必须在“数据”对象中发送操作。您收集并转储到变量“applicationform”中的表单数据也丢失

更新
看起来您混淆了分配的ajax url！您必须使用
myajax.ajaxurl

Ajax调用
包括ajax的Javascript
您的表单id->applicationForm与选择器不匹配，因此您必须像这样更改选择器

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

    $('#submit_form').click(function(e){        

        var applyformData = $('#applicantform').serialize(); // serializing the form data

        e.preventDefault();

        //ajax call
        $.ajax({
            type:   'POST', 
            url:    myajax.ajaxurl, // ajax url you assigned!   
            data: {
                 action: 'applyform',   // send your action within data 
                 formdata: applyformData, // all the data of the form (serialized)
            },

            // Displaying succes message
            success: function( data ){
              window.location.replace("https://example.org");
            },

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

服务器端PHP
因为已经序列化了数据，所以必须在php端使用parse_str。

安全
出于安全原因，您应该考虑使用<代码> WpNoNoCiField'（'MyOnNoCIE'）；<代码>


在表单中使用以下代码段将创建一个安全性，您必须立即验证服务器端

<form method="post" id="applicantform" enctype="multipart/form-data">
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="Email">
<input type="hidden" name="form_id" value="<?php echo $post->ID; ?>">
<?php wp_nonce_field( 'my_nonce' ); ?>
</form>
<button type="button" id="submit_form">Send</button>

applicationForm或applyform是您的序列化数据吗？我不确定。我从一些帖子中了解到，ajax操作应该与本例中的函数名相匹配
applyform
，这就是我这样做的原因。但是我相信它应该是
applicationform
，因为我在JS
var applicationform=$（this.serialize（）我也在所有3个地方尝试了
applyform
——结果相同，但仍然相同。在控制台的“网络”选项卡中，我看到了当前处于404状态的URL，问题是操作需要在数据数组中。我可以在20分钟内写出来。。。我在手机上，如果你能帮上忙，我会很高兴的，因为我似乎无法解决这个问题。问题似乎也是表单在模态窗口中。当我将没有模式的输入字段保存在数据库中时，让我现在试试看，仍然可以看到404页OK，请尝试url:ajaxurl，而不是使用url:myscript.ajaxurl，或者检查myscript.ajaxurl是否可访问！我已经失去了变化的轨迹。另外，在服务器端部分，我需要将表单的名称更改为
formdata
？另外，如何检查
myscript.ajaxurl
是否可访问再次询问您的帮助！

function applyform(){
        global $wpdb;

        if (!check_ajax_referer( 'my_nonce' )){
        wp_die();
        }

        $table = jobs;

    // serialized data from ajax
        $formdata = $_POST['formdata'];

   // use parse_str to unserialize
        parse_str($formdata, $formdata_array);

   // accessing your data like...
        $data = array(
            'name' => $formdata_array['name'],
            'email' => $formdata_array['email'],
            'form_id' => $formdata_array['form_id']
        );

        $format = array(
            '%s',
            '%s',
            '%s'
        );
        $success=$wpdb->insert( $table, $data, $format );
        if($success){
        // do something
            die();
        }
die();
}


<form method="post" id="applicantform" enctype="multipart/form-data">
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="Email">
<input type="hidden" name="form_id" value="<?php echo $post->ID; ?>">
<?php wp_nonce_field( 'my_nonce' ); ?>
</form>
<button type="button" id="submit_form">Send</button>


if (!check_ajax_referer( 'my_nonce' )){
wp_die();
}