Лучший способ использовать PHP и AJAX на одной странице - PullRequest
Новая
       4

Лучший способ использовать PHP и AJAX на одной странице

0 голосов
/ 17 мая 2019

На одной странице у меня есть несколько типов кода: PHP, JS и HTML.Я хочу взять информацию из формы HTML и пройти обработку PHP без перезагрузки страницы после нажатия кнопки отправки.

PHP получает значение (из формы), которое он отправляет через API иОтвет API отображается на странице

HTML (первый на странице) 

<form method="post">
  <input class="display-inline form-postcode" type="text" name="postcode" id="postcode" placeholder="Add your postcode for delivery estimate">
  <input class="form-postcode-submit" type="submit" value="Get estimate!">
</form>

PHP (второй) 

<?php
    if(isset($_POST['postcode'])) {
     $toPostcode = $_POST['postcode'];
}

// do stuff with $toPostcode
// use the API
// get response

echo $response;
?>

AJAX (третий - внизу страницы)

<script>

function submitdata()
{
 var postcode = document.getElementById( "postcode" );

 $.ajax({
 type: 'post',
 data: {
 postcode:postcode
 },

  // ???

 });
}
</script>

Мне нужно использовать PHP в одном и том же файле, потому что я работаю с woocommerce и получаю много ошибок, пытаясь поместить файл за пределы

Теперь мне интересно, как я могу использовать всеиз них на той же странице

Ответы [ 2 ]

0 голосов
/ 17 мая 2019

Вам нужно поставить PHP в начале скрипта. Когда он видит параметр postcode, он может вернуть ответ AJAX, а затем exit, не отображая HTML полной страницы.

Так это должно выглядеть примерно так: 

<?php
if(isset($_POST['postcode'])) {
     $toPostcode = $_POST['postcode'];


    // do stuff with $toPostcode
    // use the API
    // get response

    echo $response;
    exit;
}
?>

<html>
<head>
    ...
</head>
<body>
    ...
    <form method="post" id="postcode-form">
      <input class="display-inline form-postcode" type="text" name="postcode" id="postcode" placeholder="Add your postcode for delivery estimate">
      <input class="form-postcode-submit" type="submit" value="Get estimate!">
    </form>
    ...
    <script>
    $(function() {
      $("#postcode-form").submit(function(e) {
        e.preventDefault();
        submitdata();
      });
    });

    function submitdata()
    {
     var postcode = document.getElementById( "postcode" );

     $.ajax({
     type: 'post',
     data: {
     postcode:postcode
     },

      // ???

     });
    }
    </script>
</body>
</html>
0 голосов
/ 17 мая 2019

Да, вы можете использовать на той же странице.

Вам не хватает части процесса, что-то вроде: 

success: function(){
      // code where you present the results
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...