Wordpress:不带插件的集成 Mailchimp 错误请求 400 Ajax URL
Wordpress: Integration Mailchimp Without Plugin Bad Request 400 Ajax URL
我试图在不使用插件的情况下通过 ajax 请求与 mailchimp 集成,但出现错误 400 错误请求。下面的代码是用 vanilla JS 编写的 Ajax 以及与 mailchimp 集成的功能。
注意:我不想在 ajax 中使用 jquery,这就是我使用 vanilla javascript
的原因
错误在控制台上显示为:POST http://local.com/wp-admin/admin-ajax.php 400(错误请求)
Ajax 香草 JS
// Objeto com todos os campos e propriedades dentro do formulário
const form = {
email: document.getElementById('email'),
submit: document.getElementById('btn-submit-newsletter-idinheiro'),
messages: document.getElementById('newsletter-idinheiro-messages'),
}
// Evento do submit do formulário
form.submit.addEventListener('click', (event) => {
event.preventDefault();
// Instanciando Requisição AJAX
const request = new XMLHttpRequest();
request.onload = () => {
let responseObject = null;
try {
responseObject = JSON.parse(request.responseText);
} catch (e) {
console.error('Could not parse JSON');
}
if (responseObject) {
handleResponse(responseObject);
}
};
// Obter valores do formulário digitado pelo usuário
const requestData = `email=${form.email.value}`;
request.open('POST', object_name.ajax_url); // O object_name é uma variável importada pela função wp_localize_script como array dentro de functions.php
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
request.send(requestData);
// Função de retorno das mensagens obtidos dos campos validados pelo PHP a serem inseridas no front
const handleResponse = (responseObject) => {
// Limpa elemento atualizando com o novo valor
while (form.messages.firstChild) {
form.messages.removeChild(form.messages.firstChild);
}
// Função de resposta das mensagens
const responseMessages = () => {
responseObject.messages.forEach((message) => {
const element = document.createElement('span');
element.textContent = message;
form.messages.appendChild(element);
});
form.messages.style.display = 'block';
}
// Condicional mensagens
if (responseObject.ok) {
responseMessages();
form.messages.classList.add('newsletter__messages--success');
form.messages.classList.remove('newsletter__messages--error');
} else {
responseMessages();
form.messages.classList.add('newsletter__messages--error');
form.messages.classList.remove('newsletter__messages--success');
}
}
});
Functions.php - 排队脚本
function idinheiro_scripts() {
// JS
wp_enqueue_script( 'all-js', get_template_directory_uri() . '/assets/js/all.min.js', NULL, '', true );
// Localize SCRIPT
wp_localize_script('all-js', 'object_name', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
));
}
Functions.php - 集成 Mailchimp
add_action('wp_ajax_subscribe_user', 'subscribe_user_to_mailchimp');
add_action('wp_ajax_nopriv_subscribe_user', 'subscribe_user_to_mailchimp');
function subscribe_user_to_mailchimp() {
check_ajax_referer('subscribe_user', 'security');
$email = $_POST['email'];
$audience_id = getenv('MAIN_LIST_ID_MAILCHIMP');
$api_key = getenv('API_KEY_MAILCHIMP');
$data_center = substr($api_key,strpos($api_key,'-')+1);
$url = 'https://'. $data_center .'.api.mailchimp.com/3.0/lists/'. $audience_id .'/members';
$auth = base64_encode( 'user:' . $api_key );
$arr_data = json_encode(array(
'email_address' => $email,
'status' => 'subscribed' //pass 'subscribed' or 'pending'
));
$response = wp_remote_post( $url, array(
'method' => 'POST',
'headers' => array(
'Content-Type' => 'application/json',
'Authorization' => "Basic $auth"
),
'body' => $arr_data,
)
);
if ( is_wp_error( $response ) ) {
$error_message = $response->get_error_message();
echo "Something went wrong: $error_message";
} else {
$status_code = wp_remote_retrieve_response_code( $response );
switch ($status_code) {
case '200':
echo $status_code;
break;
case '400':
$api_response = json_decode( wp_remote_retrieve_body( $response ), true );
echo $api_response['title'];
break;
default:
echo 'Something went wrong. Please try again.';
break;
}
}
wp_die();
}
您需要传递 action
来调用 WordPress ajax 在您的案例中操作应该是 subscribe_user
.
const requestData = `action=subscribe_user&email=${form.email.value}`;
request.open('POST', object_name.ajax_url); // O object_name é uma variável importada pela função wp_localize_script como array dentro de functions.php
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
request.send(requestData);
我试图在不使用插件的情况下通过 ajax 请求与 mailchimp 集成,但出现错误 400 错误请求。下面的代码是用 vanilla JS 编写的 Ajax 以及与 mailchimp 集成的功能。 注意:我不想在 ajax 中使用 jquery,这就是我使用 vanilla javascript
的原因错误在控制台上显示为:POST http://local.com/wp-admin/admin-ajax.php 400(错误请求)
Ajax 香草 JS
// Objeto com todos os campos e propriedades dentro do formulário
const form = {
email: document.getElementById('email'),
submit: document.getElementById('btn-submit-newsletter-idinheiro'),
messages: document.getElementById('newsletter-idinheiro-messages'),
}
// Evento do submit do formulário
form.submit.addEventListener('click', (event) => {
event.preventDefault();
// Instanciando Requisição AJAX
const request = new XMLHttpRequest();
request.onload = () => {
let responseObject = null;
try {
responseObject = JSON.parse(request.responseText);
} catch (e) {
console.error('Could not parse JSON');
}
if (responseObject) {
handleResponse(responseObject);
}
};
// Obter valores do formulário digitado pelo usuário
const requestData = `email=${form.email.value}`;
request.open('POST', object_name.ajax_url); // O object_name é uma variável importada pela função wp_localize_script como array dentro de functions.php
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
request.send(requestData);
// Função de retorno das mensagens obtidos dos campos validados pelo PHP a serem inseridas no front
const handleResponse = (responseObject) => {
// Limpa elemento atualizando com o novo valor
while (form.messages.firstChild) {
form.messages.removeChild(form.messages.firstChild);
}
// Função de resposta das mensagens
const responseMessages = () => {
responseObject.messages.forEach((message) => {
const element = document.createElement('span');
element.textContent = message;
form.messages.appendChild(element);
});
form.messages.style.display = 'block';
}
// Condicional mensagens
if (responseObject.ok) {
responseMessages();
form.messages.classList.add('newsletter__messages--success');
form.messages.classList.remove('newsletter__messages--error');
} else {
responseMessages();
form.messages.classList.add('newsletter__messages--error');
form.messages.classList.remove('newsletter__messages--success');
}
}
});
Functions.php - 排队脚本
function idinheiro_scripts() {
// JS
wp_enqueue_script( 'all-js', get_template_directory_uri() . '/assets/js/all.min.js', NULL, '', true );
// Localize SCRIPT
wp_localize_script('all-js', 'object_name', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
));
}
Functions.php - 集成 Mailchimp
add_action('wp_ajax_subscribe_user', 'subscribe_user_to_mailchimp');
add_action('wp_ajax_nopriv_subscribe_user', 'subscribe_user_to_mailchimp');
function subscribe_user_to_mailchimp() {
check_ajax_referer('subscribe_user', 'security');
$email = $_POST['email'];
$audience_id = getenv('MAIN_LIST_ID_MAILCHIMP');
$api_key = getenv('API_KEY_MAILCHIMP');
$data_center = substr($api_key,strpos($api_key,'-')+1);
$url = 'https://'. $data_center .'.api.mailchimp.com/3.0/lists/'. $audience_id .'/members';
$auth = base64_encode( 'user:' . $api_key );
$arr_data = json_encode(array(
'email_address' => $email,
'status' => 'subscribed' //pass 'subscribed' or 'pending'
));
$response = wp_remote_post( $url, array(
'method' => 'POST',
'headers' => array(
'Content-Type' => 'application/json',
'Authorization' => "Basic $auth"
),
'body' => $arr_data,
)
);
if ( is_wp_error( $response ) ) {
$error_message = $response->get_error_message();
echo "Something went wrong: $error_message";
} else {
$status_code = wp_remote_retrieve_response_code( $response );
switch ($status_code) {
case '200':
echo $status_code;
break;
case '400':
$api_response = json_decode( wp_remote_retrieve_body( $response ), true );
echo $api_response['title'];
break;
default:
echo 'Something went wrong. Please try again.';
break;
}
}
wp_die();
}
您需要传递 action
来调用 WordPress ajax 在您的案例中操作应该是 subscribe_user
.
const requestData = `action=subscribe_user&email=${form.email.value}`;
request.open('POST', object_name.ajax_url); // O object_name é uma variável importada pela função wp_localize_script como array dentro de functions.php
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
request.send(requestData);