javascript WP - 使用Ajax进行卷曲POST

Posted 2021-05-03

add_action( 'wp_enqueue_scripts', 'add_newzmate_scripts' );
function add_newzmate_scripts() {
	wp_enqueue_script( 'newzmate', get_template_directory_uri() . '/js/newzmate.js', array('jquery'), '1.0.0', false );

	$newzmate_data = array(
						'ajaxurl' 	=> admin_url( 'admin-ajax.php' ),
						'nonce' 	=> wp_create_nonce( 'newzmate' ),
					);

	wp_localize_script( 'newzmate', 'newzmate_object', $newzmate_data);	
}



add_action( 'wp_ajax_nopriv_register_subscriber_email', 'api_call_for_register_subscriber_email' );
add_action( 'wp_ajax_register_subscriber_email', 'api_call_for_register_subscriber_email' );
function api_call_for_register_subscriber_email() {
	// First check the nonce, if it fails the function will break
	check_ajax_referer( 'newzmate', 'security' );
	
	if(!isset($_POST['email']) || empty($_POST['email']) || !isset($_POST['mailing_list']) || empty($_POST['mailing_list'])) { // Server-side validation
		$response = array(
						'status' => 0
						,'msg' => 'Some required information is missing. Please try again.'
					);
	} else {

		
		//*******************************
		$url = 'http://api.traq.li/tracker/securesub?api_key=ABjRNmDP4WA9ujDU5MzaFk5f3vdyD9kg8PMfbyJtDGRYET9R69WRqHfDccVW';
		$params = array(
			'email' => '[e-mail]',
			'mlids' => '2928',
		);

		$ch = curl_init();
		curl_setopt($ch, CURLOPT_URL, $url);
		curl_setopt($ch, CURLOPT_POST, 1);
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
		curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($params));
		curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 60);
		curl_setopt($ch, CURLOPT_TIMEOUT, 60);

		// This should be the default Content-type for POST requests
		curl_setopt($ch, CURLOPT_HTTPHEADER, array("Content-type: application/x-www-form-urlencoded"));

		$result = curl_exec($ch);
		if(curl_errno($ch) !== 0) {
			error_log('cURL error when connecting to ' . $url . ': ' . curl_error($ch));
		}

		curl_close($ch);
		// print_r($result);
		
		//*******************************


		$response = array(
						'status' 		=> 1
						,'msg' 			=> $result
						// ,'email'		=> $_POST['email']
						// ,'mailing_list' => $_POST['mailing_list']
						// ,'nounce'		=> $_POST['security']
						// ,'url' => $url
						// ,'curl_error' => error_log('cURL error when connecting to ' . $url . ': ' . curl_error($ch))
					);
	}
	echo json_encode($response);
	exit;
}

	





add_shortcode('newzmate_subscription_form', 'render_newzmate_subscription_form');
function render_newzmate_subscription_form() {
	?>
	<h2>Newzmate Form</h2>
	<form id="newzmate" name="newzmate" method="POST">
		<label for="subscriber_email">Email id:</label>
		<input type="email" name="subscriber_email" id="subscriber_email">

		<button name="submit" type="submit" >Subscribe</button>

		<input type="hidden" id="mailing_list" name="mailing_list" value="<?php echo '2928'; ?>" >

	</form>
	<p id="user-action-response" style="display:none">#user-action-response</p>
	<?php
}

// submit button clicked of 'newzmate' form
jQuery(document).ready(function () {
    jQuery("#newzmate").submit(function (e) {
        e.preventDefault();
        // alert("submit btn clicked");
        sanitize_newzmate_form_data();
        ;
    });
});

// Check & sanitize newzmate form data
function sanitize_newzmate_form_data() {
    var subscriber_email = jQuery("#subscriber_email").val();
    var mailing_list_id = jQuery("#mailing_list").val();
    var pattern = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var msg = '';

    if (subscriber_email == "" || subscriber_email == null) {           // Check if email field is empty 
        var msg = 'It seems like you forgot to add your email.';

        setTimeout(function() {
            jQuery('#user-action-response').fadeIn();
        }, 250);

        jQuery("#user-action-response").html(msg);

        setTimeout(function() {
            jQuery('#user-action-response').fadeOut();
        }, 3000);
        return false;
    }
    else if (pattern.test(subscriber_email) == false) {                 // Check correct email pattern 
        var msg = 'Kindly provide your correct email.';

        setTimeout(function() {
            jQuery('#user-action-response').fadeIn();
        }, 250);

        jQuery("#user-action-response").html(msg);

        setTimeout(function() {
            jQuery('#user-action-response').fadeOut();
        }, 3000);
        return false;
    }
    else if (mailing_list_id == "" || mailing_list_id == null) {                 // Check correct email pattern 
        var msg = 'Sorry! We are not able to find your related subscription list id.';

        setTimeout(function() {
            jQuery('#user-action-response').fadeIn();
        }, 250);

        jQuery("#user-action-response").html(msg);

        setTimeout(function() {
            jQuery('#user-action-response').fadeOut();
        }, 3000);
        return false;
    }
    else {                                                              // Process form
        // Process form
        process_newzmate_form(subscriber_email, mailing_list_id);
    }
}


// Process newzmate form
function process_newzmate_form(subscriber_email, mailing_list_id) {
    var naunce = jQuery('#newzmate-nounce').val();
    // alert(subscriber_email);

    jQuery.ajax({
            url         :   newzmate_object.ajaxurl,
            type        :   'POST',
            dataType    :   'json',
            data        :   {
                                'action'        : 'register_subscriber_email',
                                'email'         : subscriber_email,
                                'mailing_list'  : mailing_list_id,
                                'security'      : newzmate_object.nonce
                            },
            beforeSend  :   function(){
                                console.log("Sending");
                                jQuery("#user-action-response").show();
                                jQuery("#user-action-response").html("Sending... Please wait!");
                            },
            success     :   function (response){
                                console.log(response);
                                jQuery("#user-action-response").html(response.msg);

                                if(response.status == 1) {
                                    console.log(response.msg);
                                    setTimeout(function() {
                                        jQuery('#user-action-response').fadeOut();
                                    }, 5000);
                                    jQuery("#newzmate")[0].reset();
                                } else {
                                    console.log(response);
                                }
                            },
            error       :       function(ts) {
                                console.log(ts);
                                console.log( ts.responseText)
                            }
    });

}