How to add address API through AJAX

These guides cover:

First, We need to create and form in adding shipment.

<form id="add_address">
    Receiver Name: <input type="text" name="wpcargo_receiver_name" value="">
	Phone Number: <input type="text" name="wpcargo_receiver_phone" value="">
	Address: <input type="text" name="wpcargo_receiver_address" value="">
	Email: <input type="text" name="wpcargo_receiver_email" value="">
	<input type="submit" value="Submit Shipment">
</form>

Note: Make sure the the field name exist in the address field list. to get the address available field list use this route mysite.com/wp-json/wpcargo/v1/api/api_key/address/fields/type.

Second, Create a script that will handle the form submission.


jQuery(document).ready( function( $ ){
 $('form#add_address').on('submit', function( e ){
    e.preventDefault();
    var wpcargo_receiver_name 	= $( 'input[name="wpcargo_receiver_name"]' ).val();
    var wpcargo_receiver_phone 	= $( 'input[name="wpcargo_receiver_phone"]' ).val();
    var wpcargo_receiver_address = $( 'input[name="wpcargo_receiver_address"]' ).val();
    var wpcargo_receiver_email 	= $( 'input[name="wpcargo_receiver_email"]' ).val();
  
    $.ajax({
      type:"POST",
      dataType:"JSON",
      data:{
         action:'add_address', 
         wpcargo_receiver_name:wpcargo_receiver_name,
         wpcargo_receiver_phone:wpcargo_receiver_phone,
         wpcargo_receiver_address:wpcargo_receiver_address,
         wpcargo_receiver_email:wpcargo_receiver_email
      },
      url : demoAjaxHandler.ajaxurl,
      beforeSend:function(){
        //** Proccessing
        console.log( 'loading...' );
      },
      success:function(response){
        //** Process Completed
        console.log( response )
      }
    });
  });
});

Third, Enqueue the script using “wp_enqueue_script” hook and localize the script for the AJAX handler using “wp_localize_script” hook

function demo_enqueue_style() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'demo-script', get_stylesheet_directory_uri().'/demo.js', false );
    $translation_array = array(
       'ajaxurl' => admin_url( 'admin-ajax.php' ),
    );
    wp_localize_script( 'demo-script', 'demoAjaxHandler', $translation_array );
}
add_action( 'wp_enqueue_scripts', 'demo_enqueue_style' );

Fourth, Create a hook “wp_ajax_” to handle AJAX action.

function add_address_ajax_callback() {
    $ch = curl_init();
 
    //  Add form data into array and build query parameter
    // note: Array key is the post meta and the array value with the post meta value
    $post = http_build_query( array(
       'shipment' => sanitize_text_field( $_POST['shipment'] ),
       'wpcargo_shipper_name' => sanitize_text_field( $_POST['shipperName'] ),
       'wpcargo_receiver_name' => sanitize_text_field( $_POST['receiveName'] ),
       'wpcargo_status' => sanitize_text_field( $_POST['status'] )
    ) );
 
    // Add the option URL with API key
    curl_setopt($ch, CURLOPT_URL, 'http://mysite.com/wp-json/wpcargo/v1/api/my-api-key-here/address/type/add' );
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $post );
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
 
    $result = curl_exec ($ch);
    curl_close ($ch);
 
    // Return the response of the API
    echo json_encode( $result );
    wp_die();
}
add_action( 'wp_ajax_add_address', 'add_address_ajax_callback' );
add_action( 'wp_ajax_nopriv_add_address', 'add_shipment_ajax_callback' );