AJAX PHP JQUERY передача POST запроса

Для того, чтобы отправить POST запрос на PHP скрипт посредством AJAX JQUERY, создадим 2 файла:

jqtest.htm – в котором будет форма запроса и javascript код для формирования и отправки запроса;

jqtest.php – для приёма и отсылки ответа.

Листинг файла jqtest.htm:

<div>
<label for="request">Request:  </label>
<input id="request">
<input type="submit" value="Send" onclick="send();">
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
  function send()
  {
    jQuery.ajax({
      dataType: "json",
      method: "POST",
      url: "jqtest.php",
      data: { msg: jQuery('#request').val()}
    }).done(function( msg ) {
      alert(msg['answer']);
    });
  }
</script>

Листинг файла jqtest.php:

<?php
$q = ($_POST['msg']);
$ans= array(
  'answer' => 'You send: '.$q,
);
echo json_encode($ans);
?>

JQUERY запрос передаёт ключ msg в формате JSON, а PHP код формирует JSON ответ и возвращает его в ключе answer.


Листинг index.php из видео:


<?php
if(!$_POST["message"]){
// Форма ввода
?>
<!DOCTYPE html>
<html>
<head>
<title>Отправка сообщений - jQuery</title>
<script src="//code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>

<form onsubmit="Send();return false">
<label for="request">Запрос:</label>
<input id="request" required>
<input type="submit" value="Send">
</form>
<div id="result"></div>

<script>
function Send(){
jQuery.ajax({
dataType: "json",
type: "POST",
url:"//inc1.net/vlog/jquery-test/",
data: {message: jQuery('#request').val()}
}).done(function(msg){
jQuery('#result').text(msg['answer']);
})
}
</script>

</body>
</html>
<?php }else{
// Обработка запроса
$q = $_POST['message'];
$answer = array(
'answer' => 'Принят запрос: '.$q
);
echo json_encode($answer);
}
?>

Cross-Origin Read Blocking (CORB) – решено

Каждого … можно выслушать, но не с каждым стоит разговаривать.
Артур Шопенгауэр

При попытке отправить jQuery JSON запрос с другого домена, появляется ошибка:

Access to XMLHttpRequest at ‘http://*’ from origin ‘http://*’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

jquery.js?ver=*:4 Cross-Origin Read Blocking (CORB) blocked cross-origin response * with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details. 

Это означает, что совместное использование ресурсов между разными источниками(CORS) запрещено.

Для того, чтобы разрешить CORS, необходимо в начале php скрипта, который обрабатывает запрос, добавить генерацию заголовков ответа сервера, указывающих на то, что CORS разрешён.

<?php
switch ($_SERVER['HTTP_ORIGIN']) {
case 'http://remote.domain': case 'https://remote.domain':
header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Max-Age: 1000');
header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
break;
}
?>
  • http://remote.domain – url сайта, с которого может происходить запрос.

На стороне клиента, нужно указать crossDomain: true

<script>
jQuery.ajax({
  crossDomain: true,
  dataType: "json",
  method: "POST",
  url: "http://main.domain/script.php",
  data: { key: "some text" }
  }).done(function( msg ) {
  // answer
});
</script>

Итак, чтобы передать запрос с одного сайта, на другой, нужно на принимающем сайте, указать серверные заголовки, разрешающие запросы с определенного удалённого домена. А на удаленном сайте, прописать ключ, указывающий на то, что этот запрос будет работать между разными доменами.