Question

我的小型网络应用程序出现问题。我想禁用该表单将提交。

目前它的工作方式如下：首先点击登录按钮，这完全正常。阿贾克斯正在做他的工作。然后单击Logout按钮，第一次单击它就会得到一个类似GET方法的动作（这不应该发生）。然后我再次尝试点击它，它完美地记录了我。当我尝试再次登录时，它与注销按钮一样。第一次不起作用，第二次不起作用。

的index.php：

<?php
session_start();
require 'database.php';
$nowDate = date('d-m-Y h:i:s');
?>
<html>
  <head>
    <title>Chat</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

    <!-- Local scripts <3 -->
    <script src="code.js" type="text/javascript"></script>
    <link href="style.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <div class="container">
      <div class="chatbox" id="chatbox">
        <div class="errorbox" style="display: none;">
          <div class="alert alert-danger fade in">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Oh oh!</strong> <span id="errorMessage"></span>
          </div>
        </div>
        <div class="successbox" style="display: none;">
          <div class="alert alert-success fade in">
            <a href="#" class="close" data-dismiss="success" aria-label="close">&times;</a>
            <strong>Yay!</strong> <span id="successMessage"></span>
          </div>
        </div>
        <?php
        if (!isset($_SESSION['username'])) {
          ?>
        <div class="loginbox">
          <form class="post">
            <div class="form-group">
              <label for="un">Username:</label>
              <input type="text" class="form-control" name="un" id="un">
            </div>
            <div class="form-group">
              <label for="pw"><span class="important">*</span> Password:</label>
              <input type="password" class="form-control" name="pw" id="pw">
            </div>
            <button type="submit" class="btn btn-default login-button" name="login" value="Log in">Log in</button>
            <h6><span class="important">*</span> - Only needed when you have a reserved username!</h6>
          </form>
        </div>
        <?php } else { ?>
        <div class="logout">
          <form class="post">
            <button type="submit" class="btn btn-default logout-button" name="logout" value="Log out">Log out</button>
          </form>
        </div>
        <div class="choosebox">
            <?php
            $statement = $connection->prepare('SELECT id,chat_name,max_users,admin_only,online_users FROM chats');
            $statement->bind_result($id, $chat_name, $max_users, $admin_only, $online_users);
            $statement->execute();
            //if ($statement->fetch()) {
            echo '<table class="table">';
            echo '<tr><th>Chat name</th><th>Users</th><th></th></tr>';
            while ($statement->fetch()) {
              echo '<tr>';
              if ($admin_only === 1) {
                if (isset($_SESSION['admin']) && $_SESSION['admin'] === 1) {
                  echo '<td>' . $chat_name . ' <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span></td>';
                } else {
                  echo '<td>' . $chat_name . ' <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></td>';
                }
              } else {
                echo '<td>' . $chat_name . '</span></td>';
              }
              if ($max_users === 0) {
                $maxus = '&#8734;';
              } else {
                $maxus = $max_users;
              }
              echo '<td>' . $online_users . '/' . $maxus . '</td>';
              echo '<td>'
              . '<form class="post">'
              . '<button type="submit" class="btn btn-default" name="joim" value="Join">Try to join</button>'
              . '</form>'
              . '</td>';
              echo '</tr>';
            }
            echo '</table>';
            ?>
        </div>
        <div class="chat">        
        </div>
        <?php } ?>
      </div>
    </div>
    <script>
    </script>
  </body>
</html>

code.js：

/* Piece that acts weird */
$(document).ready(function () {
  $(".post").submit(function (e) {
    e.preventDefault();
    e.returnValue = false;
    return false;
  });
  $(".post").submit(function(e){
    e.preventDefault();
    e.stopPropagation();
  });
  $(".post").bind('submit', function (e) {
    e.preventDefault();
    e.returnValue = false;
    return false;
  });
  $(".logout-button").click(function (e) {
    $.post("logout.php", {logout: 'Log out'}, function (data, status) {
      if (status === 'success') {
        $("#chatbox").load(location.href + " #chatbox");
        $("#chatbox").load(location.href + " #chatbox");
      }
    });
    e.preventDefault();
    return false;
  });
  $(".login-button").click(function (e) {
    console.log('login');
    $.post("login.php", {login: 'Log in', pw: $("#pw").val(), un: $("#un").val()}, function (data, status) {
      if (status === 'success') {
        if (data !== '') {
          $(".errorbox").fadeOut();
          $("#errorMessage").html(data);
          $(".errorbox").fadeIn();
        } else {
          $("#chatbox").load(location.href + " #chatbox");
        }
      }
    });
    e.preventDefault();
    return false;
  });
});

如果你想了解其他任何事情，你可以要求它。

编辑：如果你想测试它（只是忽略密码字段）：ianketje.com/chat

编辑2：我发现了这个错误，一旦我重置了聊天框，我的脚本就会被忽略了＃34; DIV。对此的任何答案都是有帮助的＆lt; 3

Answer 1

我简化了你的代码。我删除了额外的提交按钮，因为当用户单击提交按钮时您已经在执行代码。我删除了所有返回的false语句，并将e.preventDefault（）函数调用移到了事件的顶部。这样他们就会阻止默认导航。我将以下html放在login.php文件中，以便在我的服务器上进行测试。

的login.php：

    <div class="logout">
          <form class="post" method="post">
 <button type="submit" class="btn btn-default logout-button" name="logout" value="Log out">Log out</button>
          </form>
        </div>   

<div class="choosebox">
            <table class="table"><tbody><tr><th>Chat name</th><th>Users</th><th></th></tr><tr><td>The admin hole <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></td><td>0/∞</td><td><form class="post"><button type="submit" class="btn btn-default" name="joim" value="Join">Try to join</button></form></td></tr><tr><td>The non-admin hole</td><td>0/50</td><td><form class="post"><button type="submit" class="btn btn-default" name="joim" value="Join">Try to join</button></form></td></tr></tbody></table>          </div>

为code.js修改了JavaScript：

//Changed the beginning of this function call to prevent conflicts
//with any other javascript libraries loaded.
jQuery(document).ready(function ($) {



    $(".logout-button").click(function (e) {

        e.preventDefault();

        console.log("logging out");

      $.post("logout.php", { logout: 'Log out' }, function (data, status) {



      if (status === 'success') {

          $("#chatbox").load(location.href + " #chatbox");

      }

    });





    });

  $(".login-button").click(function (e) {

      e.preventDefault();

      console.log("login");

    $.post("http://localhost/login.php", {login: 'Log in', pw: $("#pw").val(), un: $("#un").val()}, function (data, status) {
      if (status === 'success') {
        if (data !== '') {
          $(".errorbox").fadeOut();
          $("#errorMessage").html(data);
          $(".errorbox").fadeIn();
        } else {
          $("#chatbox").load(location.href + " #chatbox");
        }
      }
    });


  });
});

Answer 2

尝试

$('body').on('submit' , '.post' , funtion(e) {
    e.preventDefault()

    # the rest
})

Jquery post - 表单提交取消

2 个答案: