Question

在同一页面上，我有几种类型的代码：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，并且在尝试将文件放到外部时遇到很多错误

现在我想知道如何在同一页面中使用所有这些

Answer 1

是的，您可以在同一页面上使用。

您缺少流程部分，例如：

success: function(){
      // code where you present the results
    }

Answer 2

您需要将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>

在同一页面上使用PHP和AJAX的最佳方法

2 个答案: