如何使用 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 結帳頁面中創建複選框字段