在不离开当前页面的情况下使用 Ajax 提交表单

Question

我正在尝试提交 Ajax 表单以防止页面转到另一个页面。我正在使用的脚本仍然继续到另一个页面，即 trolley1.php。目标是将数据发送到 trolley1.php 进行处理，但客户停留在产品页面上。该脚本运行良好，但转到 trolley1.php 页面

 <script>
 $(document).ready(function(){
 $('form').submit(function(event){
 event.preventDefault();

 var formData = {
        var id = $('input[name=id]').val(),
        var name = $('input[name=name]').val(),
        var price = $('input[name=price]').val(),
        var quantity = $('input[name=quantity]').val()
    };

 $.ajax({
        type        : 'POST', 
        url         : 'trolley1.php', 
        data        : formData, 
        dataType    : 'json', 
        encode      : true
      });
  });
});

</script>

<?php
echo "
  <div class='col-sm-3 mt-5'>
    <form class='ajax' method='post' action='trolley1.php?action=add&id=$id'>
      <div class='products'>
          <a>$img</a>
          <input type='hidden' name='id' value='$id'/>
          <input type='hidden' name='name' value='$product'/>
          <input type='hidden' name='price' value='$price'/>
          <input type='text' name='quantity' class='form-control' value='1'/>
          <input type='submit' name='submit' style='margin-top:5px;' class='btn btn-info'
                 value='Add to Cart'/>      
      </div>
    </form>
  </div>

Answer 1

在 OP 上查看 cmets：

var formData = {
    id: $('input[name=id]').val(),
    name: $('input[name=name]').val(),
    price: $('input[name=price]').val(),
    quantity: $('input[name=quantity]').val()
};