javascript - 表单 Action onclick 无需使用 Ajax 刷新

Question

我有一个简单的聊天应用程序。用户输入用户名和消息，它应该被插入到数据库中。

这段代码没有发生这种情况，显然我遗漏了一些东西:

表格 + 脚本

    <form action="chat_s.php" method="post" class="send" id="form1" >
            <p>
                <label for="name">Name:</label>
                <input type="text" name="name" id="name">
            </p>
    <div style="width: 480px; height: 400px; text-align: left;" id="DIV_CHAT">
    </div>
            <p>
    <textarea id="msg" rows="5" cols="66" name="msg" placeholder="Your Message"></textarea></p>
            </p>
    <input class="submit" type="submit" id="button1" name="submit" value="Send" onfocus="this.blur()"  />
    </form>
    <script>
      var frm = $('#form1');
      frm.submit(function (ev) {
          $.ajax({
              type: frm.attr('method'),
              url: frm.attr('action'),
              data: frm.serialize(),
              success: function (data) {
                  alert(data);
              }
          });
          ev.preventDefault();
      });
</script>

这是应该插入到用户输入的数据库中的 php 文件:

CHAT_S.PHP

<?php
include_once 'connection.php';
if(!isset($_POST['submit'])) {}else
{
$name = mysqli_real_escape_string( $mysqli,$_POST['name']);
$msg = mysqli_real_escape_string($mysqli, $_POST['msg']);
$dt = date("Y-m-d H:i:s");
$sql = "INSERT INTO messages (username, chatdate, msg) VALUES ('$name', '$dt', '$msg')";
mysqli_query($mysqli, $sql); }
$mysqli->close();
?>

但结果是什么都没有。它什么都不提醒!而且它不会向数据库中插入任何内容，它只是刷新聊天框:(

Answer 1

尝试:

  var frm = $('#form1');
  frm.submit(function (ev) {
      f = $('#form1');
      $.ajax({
          type: f.attr('method'),
          url: f.attr('action'),
          data: f.serialize(),
          success: function (data) {
              alert(data);
          }
      });
      ev.preventDefault();
  });