我不想用发帖请求重新加载页面

Question

我创建表单，弹出窗口（与表单位于同一文件中）以及在用户单击按钮时创建发布请求的脚本，但是当我单击按钮时，页面自动重新布局，并且永远不会出现弹出窗口] >

*我想将参数从表单传递到弹出窗口，以识别用户选择的产品。

我的代码在下面：

*表格位于循环中以便创建许多项目

index.php

while($row = mysqli_fetch_assoc($select_all_products)) {
    $product_id = $row['id'];
    $product_name = $row['name'];
    $product_price1 = $row['price1'];
    $product_price2 = $row['price2'];
    $product_price3 = $row['price3'];
    $product_image= $row['photo'];

        ?>



         <div class="col-lg-6 col-md-6 item-entry mb-4">
         <form method="post" >
            <a href="#" class="product-item md-height bg-gray d-block">
            <?php  echo "<img width='300px' height='300px' src='images/$product_image'  alt='Image' class='img-fluid'>"; ?> 
            </a>
            <h2 class="item-title"><a href="#"><?php echo $product_name; ?></a></h2>
            <input  id="id" type="hidden" name="id" value="<?php echo $product_id; ?>">        
            <label>shop1: </label>
              <strong class="item-price"><?php echo $product_price1 ."\xE2\x82\xAc".str_repeat('&nbsp;', 5) ; ?></strong>
                <label>shop2 </label>
              <strong class="item-price"><?php echo $product_price2 ."\xE2\x82\xAc".str_repeat('&nbsp;', 5) ; ?></strong>
                <label>shop3 </label>
              <strong class="item-price"><?php echo $product_price3 ."\xE2\x82\xAc" .str_repeat('&nbsp;', 3) ; ?></strong>

            <button  type="submit" onclick="loadData(this.getAttribute('data-id'));" data-id="<?php echo $product_id; ?>" class="btn btn-primary btn-sm rounded" data-toggle="modal" data-target="#myModal">Change Price<i class="fas fa-tags"></i></button>
        </form>   
        </div>

<?php        
    }
?>
弹出窗口：

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
脚本：

<script type="application/javascript">
    function loadData(id) {
        id.preventDefault();
        $.ajax({
            url: "price.php",
            method: "POST",
            data: {get_data: 1, id: id},
            success: function (response) {
                console.log(response);
            }
        });
    }
</script>
从控制台日志中，我发现发帖请求发送了该请求，但带有重新加载页面，因此，从不显示弹出窗口。 1

我该怎么做才能使页面不被重新加载，弹出的窗口得到发帖请求？谢谢

我创建表单，弹出窗口（与表单位于同一文件中），以及当用户单击按钮时创建发布请求的脚本，但是当我单击按钮时，页面重新显示了...

Answer 1

为了防止提交表单并因此刷新页面，您应该在表单的

onsubmit