Ajax - 使用 jquery 提交时重新加载页面答案

【问题标题】：Ajax - page reloading on submit with jqueryAjax - 使用 jquery 提交时重新加载页面
【发布时间】：2020-04-17 14:57:35
【问题描述】：

我有一个简单的网上商店，我正在尝试添加多个送货选项。有两个选项，我想将客户选择的选项存储在会话（或 cookie）中。

php 脚本似乎可以自行运行，但会导致页面重新加载，因此我一直在尝试使用 jquery 实现 ajax 来发送数据，但代码无法运行或页面重新加载。

我尝试了几个答案，包括用button 代替type="submit"，但这会导致代码似乎根本没有执行。将'click' 添加到.on 会触发代码，但也会导致重新加载。我检查了控制台，没有发现任何问题。感谢您的帮助。

jQuery

$(function(){
   $('#shipping_form').on('submit', function(e){
      e.preventDefault();

      var ship = $('input[name="shipping_val"]').val();
      $.ajax({
         type: 'GET',
         data: { discount: ship },
         success: function(data) {
            //go to next section
         }
      });
      return false;
   });
});

HTML/PHP

<?php
Session_start();
if(isset($_GET['shipping_submit'])){
  $shipping_get = $_GET['shipping_val'];
}else{
  $shipping_get = '3.99';
}
$_SESSION['shipping'] = $shipping_get ;

?>
<html>
<main class="container">


<form method="GET" name="shipping_form" id="shipping_form" action="">
  <p>Please choose your prefered shipping method.</p>
    <input type="radio" name="shipping_val" value="3.99" checked>
    <label for="shipping_val">
      Standard delivery
    </label>
    <input type="radio" name="shipping_val" value="6.99" >
    <label for="shipping_val">
      Express delivery
    </label>

    <button type="submit" id="shipping_submit" name="shipping_submit" >Update</button>
    <?php
    echo '<h1>' . $_SESSION['shipping'] . '</h1>';
    ?>
</form>```

【问题讨论】：

您应该在 ajax 中添加带有端点的 URL。

标签： php jquery ajax forms

【解决方案1】：

您的问题很可能是您使用 AJAX 将数据提交到您调用它的同一文件。您的 ajax 端点（PHP 端）需要是不同的 PHP 文件。

查看其他问题：

values not updated after an ajax response

【讨论】：

谢谢，如果我将 ajax 端点 (PHP) 放在一个单独的文件中，是否可以在成功时通过 ajax 返回$_SESSION？我意识到ajax可以提供json。
是的，您可以在其他 PHP 文件中设置 $_SESSION 变量，但您不需要返回 $_SESSION 变量，您可以直接使用echo返回数据。见this other answer
您可能还会发现this one 很有帮助。