javascript - 通过 Post 向 PHP 提交值后停止页面重新加载

Question

当我尝试使用其他方法时，要么它没有停止重新加载，要么按钮停止工作。我必须将数据发布到 php，它将对其执行操作。但是，由于页面重新加载，输入值将应用于新的数据集，而不是提交时的旧数据集。页面重新加载后，旧数据会随机替换为新数据。有没有办法使用 php 停止页面重新加载？以下是我尝试过的一些方法:

1.

<script type="text/javascript">
     $('#form').submit(function () {
       $.post("header_html.php",$("#form").serialize(), function(data){            
     });
    return false;
    });
        </script>
  <!--html-->
  <form id="form" action="index.php">
        <input  style="width:200;margin-top:5px" type="text" class="form-control" id="code" name="installer2_code" placeholder="Enter Code">      
        <input type="submit" style="margin-top:5px" name="installer2_btn" class="btn btn-success" id="form" value="Enter" id="formbtn">
            </form>

2:

 $("#formbtn").click(function(){
   $.ajax({

method: "POST",

url: "index.php",

data: { name: $('#code').val()}

})

.done(function( msg ) {

alert( "Data Saved: " + msg );

});
})

<!--HTML-->
 <form id="form">
                <input  style="width:200;margin-top:5px" type="text" class="form-control" id="code" name="installer2_code" placeholder="Enter Code">


         <input type="button" style="margin-top:5px" name="installer2_btn" 
 class="btn btn-success" id="form" 
value="Enter" id="formbtn">
            </form>

另一种方法如下，但它停止了按钮功能。

 function sendForm(e){
        e.preventDefault();
    }

方法#4:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    $("#formbtn").click(function(e){
       e.preventDefault();
       $.ajax({
           method: "POST",
           url: "index.php",
           data: { name: $('#code').val()}
       })
       .done(function( msg ) {
           alert( "Data Saved: " + msg );
       });
    });

    </script>

HTML:

<form id="form">
    <input  style="width:200;margin-top:5px" type="text" class="form-control" id="code" name="installer1_code" placeholder="Enter Code">
    <input type="submit" id="formbtn" style="margin-top:5px" name="installer1_btn" class="btn btn-success" value="Enter">
</form>

PHP:

  $code_input = strip_tags($_POST['name']);
  return false;

感谢您的帮助。我愿意接受任何意见。

Answer 1

在第一个示例中

1st : 你设置了两个id来输入

<input type="submit" style="margin-top:5px" name="installer2_btn" class="btn btn-success" id="form" value="Enter" id="formbtn">

您需要从输入中删除id="form"

第二:您需要使用e.preventDefault()，例如

<script type="text/javascript">
     $('#form').submit(function (e) {
       e.preventDefault();
       var Form_data = $("#form").serialize();
       $.post("header_html.php", {Form_data : Form_data}, function(data){
          alert(data);          
       });
    });
</script>

在 PHP 中

<?php
  $form_data = $_POST['Form_data'];
?>

个人..在使用表单时..我更喜欢使用表单提交事件而不是输入点击事件

$(document).ready(function(){
  $('#form').submit(function (e) {
     e.preventDefault();
     var Form_data = $(this).serialize();
     alert(Form_data);
     /*$.post("header_html.php",$("#form").serialize(), function(data){
       alert(data);
     });*/
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--html-->
<form id="form" action="index.php">
    <input  style="width:200;margin-top:5px" type="text" class="form-control" id="code" name="installer2_code" placeholder="Enter Code">      
    <input type="submit" style="margin-top:5px" name="installer2_btn" class="btn btn-success" value="Enter" id="formbtn">
 </form>

在你的第二个代码中

1st : 你设置了两个id来输入

<input type="submit" style="margin-top:5px" name="installer2_btn" class="btn btn-success" id="form" value="Enter" id="formbtn">

您需要从输入中删除id="form"

第二:您需要使用e.preventDefault()，例如

$("#formbtn").click(function(e){
   e.preventDefault();
   $.ajax({
       method: "POST",
       url: "index.php",
       data: { name: $('#code').val()}
   })
   .done(function( msg ) {
       alert( "Data Saved: " + msg );
   });
});

当您使用 url: "index.php", 时，这意味着您将数据传递到同一页面或从同一页面传递数据......您需要使用 return false; code> 在 php 中 .. 所以在 index.php

中

<?php
   if(isset($_POST['name'])){
       echo ($_POST['name']);
       return false;
   }
?>

$(document).ready(function(){
  $("#formbtn").click(function(e){
     e.preventDefault();
     var code = $('#code').val();
     alert(code);
     /*$.ajax({
         method: "POST",
         url: "index.php",
         data: { name: $('#code').val()}
     })
     .done(function( msg ) {
         alert( "Data Saved: " + msg );
     });*/
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--html-->
<form id="form" action="index.php">
    <input  style="width:200;margin-top:5px" type="text" class="form-control" id="code" name="installer2_code" placeholder="Enter Code">      
    <input type="submit" style="margin-top:5px" name="installer2_btn" class="btn btn-success" value="Enter" id="formbtn">
 </form>

Important: be sure that jquery included