Синхронный XMLHttpRequest в основном потоке устарел / AJAX & API

Question

Я пытаюсь создать функцию ajax с API-интерфейсом списка MailChimp, однако сталкиваюсь со следующей ошибкой: «Синхронный запрос XMLHttpRequest в основном потоке устарел из-за его вредных эффектов». PHP-код работает нормально, но когда я пытаюсь ввести AJAX, все идет не так.

Честно говоря, я не знаю, с чего начать, поскольку у меня мало опыта использования ajax с API.

Может ли кто-нибудь быть любезным, рассмотрев приведенный ниже код и высказать свои мысли?

  $(document).ready(function() {
    $("#subCard").submit(function(event) {
      event.preventDefault();
      var emailSub = $("#emailSub").val();
      var fNameSub = $("#fNameSub").val();
      var lNameSub = $("#lNameSub").val();
      var subSubmit = $("#subSubmit").val();
    $(".form-message").load("action.php", {
      emailSub: emailSub,
      fNameSub: fNameSub,
      lNameSub: lNameSub,
      subSubmit: subSubmit
    });  
  });
});


<?php
session_start();
if(isset($_POST['subSubmit'])){
  $emailSub = $_POST['emailSub'];
  $fNameSub = $_POST['fNameSub'];
  $lNameSub = $_POST['lNameSub'];
if(!empty($emailSub) && !filter_var($emailSub, FILTER_VALIDATE_EMAIL) === false){
    // MailChimp API credentials
    $apiKey = 'user API key';
    $listID = 'user list ID';

    // MailChimp API URL
    $memberID = md5(strtolower($emailSub));
    $dataCenter = substr($apiKey,strpos($apiKey,'-')+1);
    $url = 'https://' . $dataCenter . '.api.mailchimp.com/3.0/lists/' . $listID . '/members/' . $memberID;

    // member information
    $json = json_encode([
        'email_address' => $emailSub,
        'status'        => 'subscribed',
        'merge_fields'  => [
            'FNAME'     => $fNameSub,
            'LNAME'     => $lNameSub
        ]
    ]);

    // send a HTTP POST request with curl
    $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);
    $result = curl_exec($ch);
    $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    // store the status message based on response code
    if ($httpCode == 200) {
        $_SESSION['msg'] = '<p style="color: #ffffff">You have successfully subscribed to AquaCodeStudio.</p>';
    } else {
        switch ($httpCode) {
            case 214:
                $msg = 'You are already subscribed.';
                break;
            default:
                $msg = 'Sorry a problem occurred, please try again.';
                break;
        }
        $_SESSION['msg'] = '<p style="color: #EA4335">'.$msg.'</p>';
    }
    }else{
       $_SESSION['msg'] = '<p style="color: #EA4335">Please enter a valid email address.</p>';
    }
}
// redirect to homepage
header('location:about.php');

?>

Answer 1

.load само по себе является синхронным, если в глобальных настройках jQuery AJAX не указано иное.

Перенаправление на страницу about.php после обработки данных формы, по-видимому, является здесь причиной.

На самом деле он перенаправляет запрос AJAX в фоновом режиме - поэтому сначала данные отправляются на load.php и обрабатываются там, а затем браузер делает еще один (GET) запрос на about.php. То, что затем вставляется в ваш оригинальный документ, является содержанием последнего. Не уверен, как именно это вызывает предупреждение «Синхронный…», но, возможно, эта страница сама содержит код, который снова делает запросы AJAX, или что-то в этом роде. (.load при выполнении без выражения с суффиксом автоматически выполняет <script> элементов, содержащихся в загруженном HTML.)