如何使用 Ajax 在 WordPress 中的数据库中插入数据
已发表: 2021-12-30
您是否正在寻找一种使用 Ajax 在 WordPress 中的数据库中插入数据的方法？ 请继续阅读，因为我们将分享实现此目标所需遵循的简单步骤。
请务必注意，您需要一些编码技能才能实施此解决方案。 但是，我们将尝试详细解释每个步骤，以描述如何在您的 WordPress 网站上实施该解决方案。
Ajax 意味着将数据发送到数据库或服务器，而无需重新加载页面。 这可确保访问者不会离开您的网站或当前页面。 此外，它可以节省大量时间，尤其是在填写大型表格时。
让我们直接进入它。
概括
- 创建表单
- 使用 JQuery 获取所有表单数据并通过 Ajax 发送数据
- 获取数据并将其插入数据库
创建表单
第一步是创建表单。 在 WordPress 中通过 Ajax 请求提交表单时，您可以通过 Ajax 发送数据并通过 URL admin_url('admin-ajax.php'); 到达主题内的函数； 安全地联系管理员。
您可以在 WordPress 提供的 Ajax 文档中了解有关此 URL 的更多信息。
要创建表单，请复制此代码并将其粘贴到您要显示的位置。 您可以在 index.php、single.php、page.php 甚至 sidebar.php 文件中显示它。
<div class="container">
<h1>WordPress AJAX Insert Post Demo</h1>
<form id="enquiry_email_form" action="#" method="POST" data-url="<?php echo admin_url('admin-ajax.php'); ?>" enctype="multipart/form-data">
<div class="form-group">
<label for="">Enter Title</label>
<input type="text" class="form-control" name="post_title" id="post_title" placeholder="Enter Title" />
</div>
<div class="form-group">
<label for="">Enter Description</label>
<textarea name="post_description" id="post_description" cols="30" rows="10" class="form-control" placeholder="Enter Post Description"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-pencil"></i> Submit</button>
</div>
</form>
</div>
使用 JQuery 获取所有表单数据并通过 Ajax 发送数据
在本节中，我们将使用 jQuery 来实现结果。 或者，您也可以使用 vanilla JavaScript 来实现相同的结果。
在继续之前，请记住注意 $.ajax() 函数内数据对象内的操作变量。 这是因为我们将在 Ajax 函数中使用该函数。
$("#enquiry_email_form").on("submit", function (event) {
event.preventDefault();
var form= $(this);
var ajaxurl = form.data("url");
var detail_info = {
post_title: form.find("#post_title").val(),
post_description: form.find("#post_description").val()
}
if(detail_info.post_title === "" || detail_info.post_description === "") {
alert("Fields cannot be blank");
return;
}
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
post_details : detail_info,
action: 'save_post_details_form' // this is going to be used inside wordpress functions.php
},
error: function(error) {
alert("Insert Failed" + error);
},
success: function(response) {
alert("Insert Success" + response);
}
});
})
上面的代码确保一旦您单击提交按钮，数据就会发送到 Ajax。 我们需要使用 WordPress 的 ajax 函数来获取主题的 functions.php 中的值。
获取数据并将其插入数据库
首先，让我们编写 WordPress Ajax 函数来获取数据并将其插入数据库。
//Saving Ajax Data
add_action('wp_ajax_nopriv_save_post_details_form','save_enquiry_form_action');
上面代码中的字符串由两个主要部分组成。 它们是 nopriv 和 save_post_details_form。
nopriv 部分表示如果用户登录，Ajax 将失败。但是，如果用户未登录，Ajax 触发器将起作用。
save_post_details_form 是我们在数据对象中 $.ajax() 内的 JavaScript 代码上编写的。 值得一提的是，如果匹配不当，该功能将无法正常工作。
add_action 函数中的另一个参数是获取数据并执行我们想要的任何操作的函数的名称。
最后一步是根据结果返回动作真或假，并显示在前端。
function save_enquiry_form_action() {
$post_title = $_POST['post_details']['post_title'];
$post_description = $_POST['post_details']['post_description'];
$args = [
'post_title'=> $post_title,
'post_content'=>$post_description,
'post_status'=> 'publish',
'post_type'=>post',
'post_date'=> get_the_date()
];
$is_post_inserted = wp_insert_post($args);
if($is_post_inserted) {
return "success";
} else {
return "failed";
}
}
请务必注意，您可以自定义消息以显示不同的输出。
结论
在这篇简短的文章中，我们分享了如何使用 Ajax 在 WordPress 中的数据库中插入数据。 最后一节中的“if else”条件将在 Ajax 中发挥作用，您可以使结果消息更具描述性。
如果您无法实施此解决方案，请随时与我们联系。 如果您犯了任何错误，您可以分解您的网站。
我们希望这篇文章可以帮助您了解如何在不重新加载页面的情况下提交数据库中的数据。
类似文章
- 如何使用 Foreach 循环获取已注册的侧边栏 WordPress
- 如何使用实际示例在 WordPress 中显示类别名称
- 如何在 WordPress 中获取登录用户信息
- 如何在 WooCommerce 结帐页面中创建复选框字段