使用 AJAX PHP MySQL 和 wpdb->insert 插入数据

Question

我正试图从Wordpress页面实现一个简单的自定义AJAX请求。

我不想使用表单数据，而是使用输入字段中的自定义数据。

当我尝试使用AJAX调用发送的数据时，它不起作用。尽管当我不在AJAX调用中发送自定义数据，只触发insert.php文件时，它是有效的，在那里我手动设置了Strings。

有人能帮我吗：(？

HTML

<input type="text" id="form-field-ajax_send_name">
<input type="text" id="form-field-ajax_send_detail">
<div id="ajax-send-button">SEND AJAX DATA</div>

JAVASCRIPT

document.querySelector('#ajax-send-button').addEventListener('click', function () {
// AJAX aufrufen
var ajax = new XMLHttpRequest();
var method = 'POST';
var url = 'insert.php';
var data = {name: document.querySelector('#form-field-ajax_send_name').value, details: document.querySelector('#form-field-ajax_send_detail').value}
var asynchronous = true;
ajax.open(method, url, asynchronous);
// AJAX Anfrage senden
ajax.send(data);
// Antwort der Anfrage erhalten
ajax.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
alert('Done!');
} else if (this.status === 201) {
alert('Fehler!')
}
}
ajax.onerror = function () {
alert("Request failed");
};
})

PHP

<?php
include_once "wp-config.php";
global $wpdb;
$p_name = $_POST["name"];
$p_details = $_POST["details"];
$insertedData = array(
'name' => $p_name,
'details' => $p_details,
);
$wpdb->insert('mytable', $insertedData);
?>

Answer 1

首先您确认您的WordPress已连接到ajax CDN。如果未连接，请将ajax CDN查询到functions.php文件。然后，编写HTML表单，如

<form>
<label for="Name">Name</label>
<input type="text" name="name" id="name">
<label for="Date of Birth">Date of Birth</label>
<input type="date" name="dob" id="dob">
<label for="Address">Address</label>
<input type="text" name="address" id="address">
<input type="submit" value="Submit" id="dataForm-submit">
</form>

完成HTML表单后，您可以编写此Jscript代码，

<script>
jQuery(document).on('submit','#dataForm-submit', function(){
jQuery.ajax({
type:'POST',
url:'<?php echo admin_url('admin-ajax.php');?>',
data:'action=dataform_submition&'+jQuery('form').serialize(),
success:function(data){
console.log(data);
}
});
});
</script>

现在，编写您的PHP函数页面，

add_action('wp_ajax_dataform_submition', 'dataform_submition');
add_action('wp_ajax_nopriv_dataform_submition', 'dataform_submition');
function dataform_submition(){
global $wpdb;
$table = $wpdb->prefix . 'Your-Table Name';
extract($_POST);
$wpdb->query($wpdb->insert($table, array(name=>$name, dob=$dob, 
address=$address), array('%s','%s','%s'));
echo 'success';
exit();
}

Answer 2

谢谢大家：(

我找到了一个解决方案。我需要在js代码中修复它，并首先设置请求头+然后将数据调整为字符串。

所以JavascriptAJAX应该是：

document.querySelector('#ajax-send-button').addEventListener('click', function () {
// AJAX aufrufen
var ajax = new XMLHttpRequest();
var method = 'POST';
var url = 'insert.php';
var data = 'name=' + document.getElementById('form-field-ajax_send_name').value + '&bestellung=' + document.getElementById('form-field-ajax_send_details').value;
var asynchronous = true;

ajax.open(method, url, asynchronous);
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

// AJAX Anfrage senden
ajax.send(data);
// Antwort der Anfrage erhalten
ajax.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
alert('Done!');
} else if (this.status === 201) {
alert('Fehler!')
}
}
ajax.onerror = function () {
alert("Request failed");
};
})