提问人:Soma Moradi 提问时间:11/10/2023 最后编辑:Soma Moradi 更新时间:11/13/2023 访问量:36
如何在js文件wordpress插件中传递和获取JSON值?
How to pass and get JSON value in js file wordpress plugin?
问:
我开发了一个与Mailchimp API集成的联系表单插件。问题出在 ajax 函数中的 app.js 文件中,其中数据为空(数据未正确传递到此文件)。你能帮我解决这个问题吗?以下是我的插件中的文件:
联系表单.php:
<form id="contactform" method="post" action="<?php echo plugin_dir_url(__FILE__) . 'action.php';?>">
// inputs
</form>
操作 .php:
<?php
class ContactFormHandler {
public function processForm() {
if (isset($_REQUEST['email'])) {
$sendToMailchimp = isset($_REQUEST['sub_status']) ? true : false;
$fname = $_REQUEST['fname'];
$lname = $_REQUEST['lname'];
$email = $_REQUEST['email'];
$message = $_REQUEST['message'];
$company = $_REQUEST['company'];
$status = $sendToMailchimp;
$email_valid = filter_var($email, FILTER_VALIDATE_EMAIL);
$result = [];
if ($email_valid) {
$this->sendEmail($fname, $lname, $email, $message, $company, $status, $result);
if ($sendToMailchimp) {
$this->sendToMailchimp($fname, $lname, $email, $company, $result);
}
} else {
$result['notvalid'] =true;
}
echo json_encode($result);
}
}
private function sendEmail($fname, $lname, $email, $message, $company, $status, &$result) {
$to = get_option('email_destination');
$subject = 'New Message Form Contact';
$email_message = "Name: $fname $lname\nEmail: $email\nStatus: $status\nCompany: $company\nMessage: $message";
$headers = "From: " . $fname . $lname . " <" . $email . "> \r\n";
$send_email = mail($to, $subject, $email_message, $headers);
if ($send_email) {
$result['success'] = true;
} else {
$result['notvalid'] = true;
}
}
private function sendToMailchimp($fname, $lname, $email, $company, &$result) {
$apiKey = get_option('mailchimp_api_key');
$listID = get_option('mailchimp_list_id');
$memberID = md5(strtolower($email));
$dataCenter = substr($apiKey, strpos($apiKey, '-') + 1);
$url = 'https://' . $dataCenter . '.api.mailchimp.com/3.0/lists/' . $listID . '/members/' . $memberID;
$json = json_encode([
'email_address' => $email,
'status' => 'subscribed',
'merge_fields' => [
'FNAME' => $fname,
'LNAME' => $lname,
'COMPANY' => $company,
],
]);
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_USERPWD, 'user:' . $apiKey);
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'PUT');
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_POSTFIELDS, $json);
$resultMailchimp = json_decode(curl_exec($ch), true);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
if ($httpCode == 200) {
$result['sendmail'] = true;
} else if ($httpCode == 214) {
$result['notsendmail'] = true;
} else {
$result['else'] = true;
}
curl_close($ch);
}
}
$contactFormHandler = new ContactFormHandler();
$contactFormHandler->processForm();
?>
应用.js :
jQuery(document).ready(function($) {
$('#contactform').on('submit', function() {
$('.output_message').text('Loading...');
var form = $(this);
$.ajax({
url: form.attr('action'),
method: form.attr('method'),
data: form.serialize(),
success: function(result) {
const $form_result = JSON.parse(result);
if ($form_result.success) {
$('.output_message').text('Message Sent!');
}
if ($form_result.sendmail) {
$('.output_message').append(' Your email has been added to the newsletter.');
}
}
});
return false;
});
});
联系表格邮件chimp.php:
<?php
/*
Plugin Name: Contact Form Plugin
Description: Custom Contact Form with Mailchimp Integration.
Version: 1.0
*/
session_start();
require_once(plugin_dir_path(__FILE__) . 'action.php');
function enqueue_contact_form_scripts() {
// Enqueue jQuery
wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.6.4.min.js', array(), null, true);
// Enqueue app.js
wp_enqueue_script('app', plugin_dir_url(__FILE__) . 'app.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_contact_form_scripts');
function contact_form_shortcode() {
ob_start();
include(plugin_dir_path(__FILE__) . 'contact-form.php');
return ob_get_clean();
}
add_shortcode('contact_form', 'contact_form_shortcode');
答:
0赞
Denis Sinyukov
11/10/2023
#1
更好的解决方案是制作一个 FormData 并发送它:
let myform = document.getElementById("contactform");
let data = new FormData(myform);
$.ajax({
url: form.attr('action'),
data: data,
method: form.attr('method'),
....
});
评论
0赞
Soma Moradi
11/11/2023
我试过,但没有用。
评论