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 事件上调用 preventDefault ，如下所示：<form method="post" onsubmit="event.preventDefault()">。还可以像这样返回 false ：<form method="post" onsubmit="return false">。

我制作了example，删除了 php 部分，以便您可以看到。希望这会有所帮助。

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

1 个答案: