如何在js文件wordpress插件中传递和获取JSON值?

How to pass and get JSON value in js file wordpress plugin?

提问人:Soma Moradi 提问时间:11/10/2023 最后编辑:Soma Moradi 更新时间:11/13/2023 访问量:36

问:

我开发了一个与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');
php json ajax wordpress 插件

评论

0赞 O. Jones 11/10/2023
查看浏览器 devtools 中的“网络”选项卡。您将能够看到传递给 WordPress 的请求和回复。
0赞 Soma Moradi 11/13/2023
问题是当我使用 get_option() 时

答:

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
我试过,但没有用。