Question

当我尝试使用其他方法时，要么它没有停止重新加载，要么按钮停止运行。我必须将数据POST到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

在您的第一个示例中

第一：您设置两个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'];
?>

在使用form时个人..我更喜欢使用form submit event代替input click event

$(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>

在您的第二个代码中

第一：您设置两个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",表示您将数据传入/传出同一页面时...您需要在php中使用return false; ..所以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>

重要：请确保包含jquery

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

1 个答案: