Javascript 如何在wordpress中使用php编写ajax？

当用户单击我的提交按钮时，我想向一个特殊的URL发送一个POST请求，该URL是根据表单中的信息创建的。我还希望它在WordPress MYSQL数据库中插入一行

我在

admin ajax.php

的末尾附加了以下内容：

function add_query_db_callback(){

global $wpdb;

    $id_instagram = $_POST['id_instagram'];
    $table_name = 'wp_insta_email';

        $data_array = array(
            'id_instagram' => $id_instagram
        );

        $rowResult = $wpdb->insert($table_name, $data_array, $format=NULL);

echo $_POST['data'];

if (!$rowResult) {
    echo "FAILED TO UPDATE";
} else {
    $rowResult;
    echo "WILL UPDATE SUCCESSFULLY - CALL RESULT FUNCTION";
};

wp_die();
die();
    
}`

    <!-- Search_box --> 
<div class="s006">
    <form  method="post" id="form_id" onsubmit="return myFunction()">
        <fieldset>
            <div class="inner-form">
                <div class="input-field">
                    <button class="btn-search" type="button submit" value="Submit" name="BtnSubmit">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
                            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
                        </svg>
                    </button>
                    <input id="search" type="text" placeholder=" INPUT YOUR ID INSTAGRAM " value="" name="id_instagram"/>
                </div>
            </div>
        </fieldset>
    </form>
</div>

在文件

header.php

中：

function add_query_db_callback(){

global $wpdb;

    $id_instagram = $_POST['id_instagram'];
    $table_name = 'wp_insta_email';

        $data_array = array(
            'id_instagram' => $id_instagram
        );

        $rowResult = $wpdb->insert($table_name, $data_array, $format=NULL);

echo $_POST['data'];

if (!$rowResult) {
    echo "FAILED TO UPDATE";
} else {
    $rowResult;
    echo "WILL UPDATE SUCCESSFULLY - CALL RESULT FUNCTION";
};

wp_die();
die();
    
}`

    <!-- Search_box --> 
<div class="s006">
    <form  method="post" id="form_id" onsubmit="return myFunction()">
        <fieldset>
            <div class="inner-form">
                <div class="input-field">
                    <button class="btn-search" type="button submit" value="Submit" name="BtnSubmit">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
                            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
                        </svg>
                    </button>
                    <input id="search" type="text" placeholder=" INPUT YOUR ID INSTAGRAM " value="" name="id_instagram"/>
                </div>
            </div>
        </fieldset>
    </form>
</div>

及

函数myFunction（）{
var act=“//example.com/public/”+document.getElementById（“搜索”）.value；
var name=document.getElementById（“搜索”）.value；
document.getElementById（“form_id”）.action=act；
document.getElementById（“form_id”）.submit（）；
如果（名称=“”）{
警告（“请填写所有字段”）；
}否则{
//提交表单的AJAX代码。
var ajaxData={
“操作”：“添加查询数据库”，
“id\u instagram”：名称
}
jQuery.ajax({
类型：“POST”，
url:“”，
数据：ajaxData，
成功：功能（响应）{
log（“返回的数据：+响应”）；
$statusSelectCell.parent（）.css（{“背景色”：“#b3e6b3}）；
$statusSelectCell.parent（）.animate（{backgroundColor:currentBackgroundColor}，1200）；
},
错误：函数（）{
警报（“发布数据失败！！”；
}
});
}
回归法；
}

---

但是它不会保存到我的数据库（只传递到我想要的URL）。

为什么要在javascript代码中调用

document.getElementById（“form\u id”）.submit（）函数

实际上，
.submit（）
函数会将您重定向到所需的url，并且它下面的行不会执行

或者，如果要重定向到特定页面，则需要在ajax
success
部分的最底部添加代码：

<script type="text/javascript">
function myFunction() {
    var act= "//example.com/public/"+document.getElementById("search").value;
    var name = document.getElementById("search").value;
    document.getElementById("form_id").action = act;
    // document.getElementById("form_id").submit();
    if (name == '') {
        alert("Please Fill All Fields");
    } else {
        // AJAX code to submit form.
        var ajaxData = {
            'action': 'add_query_db',
            'id_instagram': name
        }
        jQuery.ajax({
            type: "POST",
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            data: ajaxData,
            success: function( response ) {
                console.log("Data returned: " + response );
                $statusSelectCell.parent().css({"background-color": "#b3e6b3"});
                $statusSelectCell.parent().animate({backgroundColor: currentBackgroundColor}, 1200);

                // if you want to be redirected place submit function here
                document.getElementById("form_id").submit();
            },
            error: function() {
                alert("FAILED TO POST DATA!!");
            }

    });
    }
    return act;
}
</script>


函数myFunction（）{
var act=“//example.com/public/”+document.getElementById（“搜索”）.value；
var name=document.getElementById（“搜索”）.value；
document.getElementById（“form_id”）.action=act；
//document.getElementById（“form_id”）.submit（）；
如果（名称=“”）{
警告（“请填写所有字段”）；
}否则{
//提交表单的AJAX代码。
var ajaxData={
“操作”：“添加查询数据库”，
“id\u instagram”：名称
}
jQuery.ajax({
类型：“POST”，
url:“”，
数据：ajaxData，
成功：功能（响应）{
log（“返回的数据：+响应”）；
$statusSelectCell.parent（）.css（{“背景色”：“#b3e6b3}）；
$statusSelectCell.parent（）.animate（{backgroundColor:currentBackgroundColor}，1200）；
//如果你想被重定向，把提交功能放在这里
document.getElementById（“form_id”）.submit（）；
},
错误：函数（）{
警报（“发布数据失败！！”；
}
});
}
回归法；
}

希望这对您有所帮助
您是否检查了请求是否到达了POST URL？我建议使用随附的单独JavaScript文件通过变量包含Ajax URL。请注意，您不应该混合使用PHP和JS-它们的执行方式不同，可能会导致意外行为，您是否尝试过我上面编写的代码？如果不想重定向，则可以在成功部分删除document.getElementById（）函数。我删除了代码
document.getElementById（“form_id”）.submit（），但它不起作用，但我想重定向一个特定的url