javascript - I need to send a request through JS to a php file via API

Question

Help me please. There are two php files Data.php and Status.php. When you enter data in the zip field, you need to send a request to the Data.php file, and if zip is available, send the data to Status.phpenter code here and parse the response in the field.Below I will give a js example and Data.php, Status.php I will be grateful for the help)

function ajax(params) {
        var xhr = new XMLHttpRequest();
        var url = params.url || '';
        var body = params.body || '';
        var success = params.success;
        var error = params.error;

        xhr.open('POST', url, true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(body);
        xhr.onload = function () {
            if (xhr.readyState === 4 && xhr.status === 200 && typeof success === 'function') {
                success(xhr.response);
            } else if (xhr.readyState === 4 && xhr.status !== 200 && typeof error === 'function') {
                error(xhr.response);
            }
        };
        xhr.onerror = error || null;
    }
    
    //Data.php
    
<?php
header('Content-Type: application/x-www-form-urlencoded');
header('Access-Control-Allow-Origin: *');

if (isset($_POST['zip'])) {
    $zip = filter_var($_POST['zip'], FILTER_VALIDATE_REGEXP, array('options'=>array('regexp'=>'/^[0-9]{5}/')));

    if ($zip) {
        $status = (int) $zip < 33333 ? array('zip' => $zip, 'state' => 'OH', 'city' => 'NEWTON FALLS') : array('zip' => $zip, 'state' => 'CA', 'city' => 'BEVERLY HILLS');
        echo json_encode($status);
    } else {
        echo 'error';
    }
} else {
    echo 'error';
}


  //Status.php
  
  <?php
header('Content-Type: application/x-www-form-urlencoded');
header('Access-Control-Allow-Origin: *');

if (isset($_POST['zip'])) {
    $zip = filter_var($_POST['zip'], FILTER_VALIDATE_REGEXP, array('options' => array('regexp' => '/^[0-9]{5}/')));

    if ($zip) {
        $status = (int) $zip < 33333 ? 'allowed' : 'blocked';
        echo $status;
    } else {
        echo 'error';
    }
} else {
    echo 'error';
}

Answer 1

You need to send an AJAX call from the first php to second php.
Include following script inside first php file.
test1.php

<?php 
// other content
<script>
(function() {
  var httpRequest;
  document.getElementById("ajaxButton").addEventListener('click', makeRequest);

  function makeRequest() {
    httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', 'test2.php');
    httpRequest.send();
  }

  function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText); // your response
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
})();
</script>
?>

Then return your content data from the next php file as follows.
test2.php

<?php 
    $x = "content data";
    echo $x;

?>

For more details about AJAX, follow below link https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started