表单不使用ajax和php提交吗？

Question

我正在尝试通过使用表单向数据库提交消息，并且希望该表单无需刷新即可提交。

[我使用Javascript代码从表单的同一页中编码的“ JS”代码中捕获数据。

 $(document).ready(function(){  
      $('#submit').click(function(){  
           var typed_msg = $('#typed_msg').val();   
           if(typed_msg == '')  
           {  
                $('#error_msg').html("Message blank!");  
           }  
           else  
           {  
                $('#error_msg').html('');  
                console.log(typed_msg);
                $.ajax({  
                     url:"msg.php",  
                     method:'post',  
                     data:{typed_msg:typed_msg},  
                     success:function(data){  
                          $("form").trigger("reset");  
                          $('#succ_msg').fadeIn().html(data);  
                          setTimeout(function(){  
                               $('#success_message').fadeOut("Slow");  
                          }, 2000);  
                     }  
                });  
           }  
      });  
 });  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="POST" style="padding:5px 0">
       <input autofocus autocomplete="off" name="typed_msg" id="typed_msg" >
       <input type="button" name="submit" id="submit" value="Go" class="btn btn-success" >
    </form>

我用来向数据库提交数据的PHP文件“ msg.php”

<?php
require_once('db.php');

 if(isset($_POST["typed_msg"]))  
 {  
      $typed_msg = mysqli_real_escape_string($con, $_POST["typed_msg"]); 
      $sql = "INSERT INTO messages (`time_send`,`sender_id`,`receiver_id`,`msg_body`) VALUES (now(),'".$_SESSION['id']."','$msgId','$typed_msg')";  
      if(mysqli_query($con, $sql))  
      {  
           echo "Message Saved";  
      }  
 } 


?>

Answer 1

您必须使用event.preventDefault()来防止执行默认操作。

1. 使用表单onsubmit事件

<form action="" onsubmit="formSubmitted" method="POST" style="padding:5px 0">
   <input autofocus autocomplete="off" name="typed_msg" id="typed_msg" >
   <input type="button" name="submit" id="submit" value="Go" class="btn btn-success" >
</form>

2. 使用onclick事件。

<form action="" method="POST" style="padding:5px 0">
   <input autofocus autocomplete="off" name="typed_msg" id="typed_msg" >
   <input type="button" name="submit" onclick="formSubmitted" id="submit" value="Go" class="btn btn-success" >
</form>

<script>
    function formSubmitted(e){  
        e.preventDefault();
       var typed_msg = $('#typed_msg').val();   
       if(typed_msg == '')  
       {  
            $('#error_msg').html("Message blank!");  
       }  
       else  
       {  
            $('#error_msg').html('');  
            $.ajax({  
                 url:"msg.php",  
                 method:'post',  
                 data:{typed_msg:typed_msg},  
                 success:function(data){  
                      $("form").trigger("reset");  
                      $('#succ_msg').fadeIn().html(data);  
                      setTimeout(function(){  
                           $('#success_message').fadeOut("Slow");  
                      }, 2000);  
                 }  
            });  
       }  
    }
</script>

Answer 2

使用此代码

HTML表单

<form action="" method="POST" style="padding:5px 0">
   <input autofocus autocomplete="off" name="typed_msg" id="typed_msg" >
   <input type="button" name="submit" id="submit" value="Go" class="btn btn-success" >
</form>

脚本

 $(document).ready(function(){  
      $('#submit').click(function(){          
           var typed_msg = $('#typed_msg').val();   
           if(typed_msg == '')  
           {  
                $('#error_msg').html("Message blank!");  
           }  
           else  
           {  
                $('#error_msg').html('');  
                $.ajax({  
                     url:"msg.php",  
                     method:'post',  
                     data:{'typed_msg':typed_msg},  
                     success:function(data){  
                          $("form").trigger("reset");  
                          $('#succ_msg').fadeIn().html(data);  
                          setTimeout(function(){  
                               $('#success_message').fadeOut("Slow");  
                          }, 2000);  
                     }  
                });  
           }  
      });  
 });

Answer 3

 $sql = "INSERT INTO messages (`time_send`,`sender_id`,`receiver_id`,`msg_body`) VALUES (now(),'".$_SESSION['id']."','$msgId','$typed_msg')";

此$ msgId来自哪里？

---

请检查此链接以检查ajax错误：jQuery ajax error function

Answer 4

您的问题在PHP部分。在查询中使用：

  $sql = "INSERT INTO messages (`time_send`,`sender_id`,`receiver_id`,`msg_body`) VALUES (now(),'".$_SESSION['id']."','$msgId','$typed_msg')";  

但您不以以下方式开始会话：>

session_start();
位于文件顶部。 

因此查询将失败，因为$_SESSION['id']是未知的，并且您没有报告错误。要报告错误，您可以执行以下操作：

if(mysqli_query($con, $sql)){  
    echo "Message Saved";  
}else{  
    echo mysqli_error ( $con )
}
还请注意，您可以使用sql注入。您应该使用准备好的语句（受mysqli API支持）

此外，您正在使用另一个变量$msgId，该变量将返回undefined，因为在您的php代码中无处声明它