使用AJAX将输入数据发布到Wordpress中的数据库

Question

目前我有2个输入不使用<form>标记：

function checkSubmit() {
    var userInfo = {
        'moneyOf': document.getElementById('priceSlider').value,
        'emailOf': document.getElementById('inputheaderBox').value
    };

    jQuery.ajax({
        type: 'POST',
        url: "<?php echo admin_url('admin-ajax.php'); ?>",
        data: {
            action: "savedata", userInfo
        },               
        success: function(data){
            //alert('success');
            console.log(data);
        },
        error: function(errorThrown){
            console.log(errorThrown);
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="priceSlider" type="range" min="100000" value="200000" max="1000000" step="1000" />
    <input type="text" id="inputheaderBox"/>
    <button id="inputSubmit" onClick="checkSubmit()">Submit</button></form>

似乎无法正常工作

Answer 1

您的功能放在JS文件中？ JS无法呈现和解释PHP代码。

见AJAX reference。您应该使用wp_enqueue_script()添加脚本，并使用wp_localize_script()定义ajax网址。

wp_enqueue_script( 'custom', PATH_TO_JS_FOLDER . 'custom.js', [ 'jquery' ], null, true );
wp_localize_script( 'custom', 'ajax_params', [
        'url'   => admin_url( 'admin-ajax.php' ),
    ] );

在你的剧本里面：

url: ajax_params.url，

参见参考资料。你会理解我的意思。