【问题标题】:Page gets reloaded after clicking the submit button单击提交按钮后页面重新加载
【发布时间】:2018-10-15 06:29:48
【问题描述】:

$(document).ready(function() {
  $("submit").click(function(event) {
    event.preventDefault();
  });
});

function norefresh() {
  return false;
}
<form method="post" action="<?php echo htmlspecialchars($_SERVER[" PHP_SELF "]);?>">
  <div class="form-group">
    <div class="row">
      <div class="col-xs-6 col-md-6 form-group">
        <label for="lname1">NAME OF THE LANDLORD</label>
        <input type="text" class="form-control" id="lname" name="lname"></div>
      <div class="col-xs-6 col-md-6 form-group">
        <label for="lpan1">PAN OF LANDLORD</label>
        <input type="text" class="form-control" id="lpan" name="lpan">
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="row">
      <div class="col-xs-6 col-md-6 form-group">
        <label for="ladd1">ADDRESS OF LANDLORD</label>
        <input type="text" class="form-control" id="ladd" name="ladd">
      </div>
      <div class="col-xs-6 col-md-6 form-group">
        <label for="lacc1">ACCOMODATION ADDRESS</label>
        <input type="text" class="form-control" id="lacc" name="lacc">
      </div>
    </div>
  </div>

  <input type="submit" class="btn btn-primary pull-right" name="submit" value="Add New" onClick="getintotab();resetform();return false;" />
  <br> <br>
</form>
</div>
<?php
	if(isset($_POST['submit'])){
		$sql1 = $db->query("INSERT INTO Landlord(name, landlord_pan, landlord_address, acc_address) VALUES ('".$_POST["lname"]."','".$_POST["lpan"]."','".$_POST["ladd"]."','".$_POST["lacc"]."')");
	
		if($sql1 == TRUE){
			echo "";
		} 
		else{
			echo "Error: " . $sql1 . "<br>" . mysqli_error($db);
		}
	}
?>

点击提交按钮的 php 脚本将表单数据发送到 mysql 数据库,getintotab() 函数将表单值存储在同一页面上的表中 resetform() 重置表单 但是在单击提交按钮时,页面会重新加载。
我已经尝试了以下方法:

  1. norefresh()
  2. preventdefault()
  3. 将输入类型设为按钮而不是提交

仍然没有运气

【问题讨论】:

标签: javascript php jquery html ajax


【解决方案1】:

您正在使用 http 请求(表单提交)访问服务器。这将导致页面重新加载。

您应该通过 XmlHttpRequest 访问服务器,即 AJAX 调用以分别从/向服务器获取/发布数据。这只会刷新部分页面,不会重新加载完整页面。希望这会有所帮助。

【讨论】:

    【解决方案2】:

    您需要使用 event.preventDefault() 但您的选择器“提交”不会匹配任何内容。

    向提交按钮添加标识符:

    <input type="submit" id="submit" ... >
    

    然后将其用作您的选择器:

      $("#submit").click(function(event) {
        event.preventDefault();
        # You should add the other function calls here 
        # instead of having function calls in two separate places.
      });
    

    或在表单中添加标识符:

    <form id="form" ... >
    

    然后为提交操作添加一个监听器(我推荐的方式):

      $("#form").submit(function(event) {
        event.preventDefault();
        # You should add the other function calls here 
        # instead of having function calls in two separate places.
      });
    

    【讨论】:

    • 好吧,如果您正确设置了 id,第二种方法肯定可以工作。像这样拥有 event.preventDefault() 会阻止表单立即提交。
    • 尝试使用按钮 id 以及表单 id,不这样做
    【解决方案3】:

    我认为你可以删除 onClick="getintotab();resetform();return false;" 并在 jquery 选择器中使用所有 js 东西,它会为你工作。

    【讨论】:

      【解决方案4】:

      你应该使用这个技巧:

      <input type="submit" class="btn btn-primary pull-right" name="submit" value="Add New" />
      

      <input type="button" class="btn btn-primary pull-right" name="submit" value="Add New" />
      

      希望这会有所帮助。

      【讨论】:

      • 然后从表单标签中删除 method="post" 属性
      • 为此我建议使用ajax,这是最好的选择ajax post method jquery
      • 如果您能告诉我作为 Web 开发的新手,我应该如何做到这一点,那将非常有帮助