使用AJAX提交表单而不重新加载，我做错了什么？

时间：2017-05-08 22:57:50

标签： php jquery html ajax

所以，我需要使用ajax来提交表单（单击6个按钮中的任意一个，并在数据库中增加1个字段）。我认为我的功能正确（好吧，如果我这样做，它会正常工作），但每次提交后它仍然会刷新页面。我在这里做错了什么？

我的PHP和HTML都在同一页面内（index.php） 这是我的代码：

 <?php
 include '/Login/db_login.php';
 $page = 'index.php';

 if(isset($_POST['ContBt1'])){
 $sql = "UPDATE senhas2 SET Contador=Contador+1 WHERE ID = 1";
mysqli_query($conn, $sql);
 mysqli_close($conn);
 }
 
 if(isset($_POST['ContBt2'])){
 $sql = "UPDATE senhas2 SET Contador=Contador+1 WHERE ID = 2";
mysqli_query($conn, $sql);
 mysqli_close($conn);
 }
 
 if(isset($_POST['ContBt3'])){
 $sql = "UPDATE senhas2 SET Contador=Contador+1 WHERE ID = 3";
 mysqli_query($conn, $sql);
 mysqli_close($conn);
 }
 
 if(isset($_POST['ContBt4'])){
 $sql = "UPDATE senhas2 SET Contador=Contador+1 WHERE ID = 4";
 mysqli_query($conn, $sql);
 mysqli_close($conn);
 }
 
 if(isset($_POST['ContBt5'])){
 $sql = "UPDATE senhas2 SET Contador=Contador+1 WHERE ID = 5";
mysqli_query($conn, $sql);
 mysqli_close($conn);
 }
 
 if(isset($_POST['ContBt6'])){
 $sql = "UPDATE senhas2 SET Contador=Contador+1 WHERE ID = 6";
mysqli_query($conn, $sql);
 mysqli_close($conn);
 }
 ?>
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Index</title>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body class="Background">
	<div class="BtLogin">
			<a href="Login/paginalogin.php">
				<input type="image" id="admin" src="http://i.imgur.com/I3D3nqm.png">
			</a>
	</div>
	<form action=""  id="myform" method="POST" onsubmit="return false">
		<table class="Table">
			<tr>
				<td><input class="Button ButtonTxt" type="button" name="ContBt1"  value="A"></td>
				<td><input class="Button ButtonTxt" type="button" name="ContBt2"  value="B"></td>
			</tr>
			<tr>
				<td><input class="Button ButtonTxt" type="button" name="ContBt3"  value="C"></td>
				<td><input class="Button ButtonTxt" type="button" name="ContBt4"  value="D"></td>
			</tr>
			<tr>
				<td><input class="Button ButtonTxt" type="button" name="ContBt5"  value="E"></td>
				<td><input class="Button ButtonTxt" type="button" name="ContBt6"  value="F"></td>
			</tr>
		</table>
	</form>
	        <script>
$(function(){
    $('.Button').on('click', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'index.php',
            data: $('#myform').serialize(),
            success: function () {
                alert('The form was submitted successfully');
            }
        });
    });
});
		</script>
</body>
</html>

这是我的db_login.php：

<?php
	$servername = "localhost";
	$username = "root";
	$password = null;
	$dbname = "pap1";

	$conn = mysqli_connect($servername, $username, $password, $dbname);
	if (!$conn) {
		?>
	    <html >
<head>
  <meta charset="UTF-8">
  <title>Error Page</title>
</head>

<body>

      <h1>ERROR</h1>
	  <center><h2> Error ($dbname) does not exist</h2></center>
  </form>

</body>
</html>
<?php
	}
?>

1 个答案:

答案 0 :(得分：0)

  1. 向表单标记添加属性：onsubmit =＆＃34; return false＆＃34;
  2. 更改按钮类型＆＃39;提交＆＃39;到＆＃39;按钮＆＃39;

  3. 您的代码应该是这样的：

    $(function(){ $('.Button').on('click', function (e) { e.preventDefault(); $.ajax({ type: 'POST', url: 'index.php', data: $('#myform').serialize(), success: function () { alert('The form was submitted successfully'); } }); }); });

    4. P.S。如果出现问题让我知道，请告诉我。 - - - - 更新 - - - - - 试试这段代码：

    <?php
 include '/Login/db_login.php';
 $page = 'index.php';

 if(isset($_POST['ContBt1'])){
     $sql = "UPDATE senhas2 SET Contador=Contador+1 WHERE ID = 1";
    mysqli_query($conn, $sql);
     mysqli_close($conn);
 }

 if(isset($_POST['ContBt2'])){
     $sql = "UPDATE senhas2 SET Contador=Contador+1 WHERE ID = 2";
    mysqli_query($conn, $sql);
     mysqli_close($conn);
 }

 if(isset($_POST['ContBt3'])){
     $sql = "UPDATE senhas2 SET Contador=Contador+1 WHERE ID = 3";
     mysqli_query($conn, $sql);
     mysqli_close($conn);
 }

 if(isset($_POST['ContBt4'])){
     $sql = "UPDATE senhas2 SET Contador=Contador+1 WHERE ID = 4";
     mysqli_query($conn, $sql);
     mysqli_close($conn);
 }

 if(isset($_POST['ContBt5'])){
     $sql = "UPDATE senhas2 SET Contador=Contador+1 WHERE ID = 5";
    mysqli_query($conn, $sql);
     mysqli_close($conn);
 }

 if(isset($_POST['ContBt6'])){
     $sql = "UPDATE senhas2 SET Contador=Contador+1 WHERE ID = 6";
    mysqli_query($conn, $sql);
     mysqli_close($conn);
 }
 if (isset($_POST['ContBt1']) || isset($_POST['ContBt2']) || isset($_POST['ContBt3']) || isset($_POST['ContBt4']) || isset($_POST['ContBt5']) || isset($_POST['ContBt6']))
    die();
 ?>
<!doctype>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Index</title>
    <link href="index.css" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body class="Background">
    <div class="BtLogin">
        <a href="Login/paginalogin.php">
            <input type="image" id="admin" src="http://i.imgur.com/I3D3nqm.png">
        </a>
    </div>
    <form action=""  id="myform" method="POST">
        <table class="Table">
            <tr>
                <td><input class="Button ButtonTxt" type="button" name="ContBt1"  value="A"></td>
                <td><input class="Button ButtonTxt" type="button" name="ContBt2"  value="B"></td>
            </tr>
            <tr>
                <td><input class="Button ButtonTxt" type="button" name="ContBt3"  value="C"></td>
                <td><input class="Button ButtonTxt" type="button" name="ContBt4"  value="D"></td>
            </tr>
            <tr>
                <td><input class="Button ButtonTxt" type="button" name="ContBt5"  value="E"></td>
                <td><input class="Button ButtonTxt" type="button" name="ContBt6"  value="F"></td>
            </tr>
        </table>
    </form>
    <script>
        $(function(){
            $('.Button').on('click', function (e) {
                e.preventDefault();
                var data = {};
                $("#myform input").each(function(){
                    data[$(this).attr("name")] = $(this).val();
                })
                $.ajax({
                    type: 'POST',
                    url: 'index.php',
                    data: data,
                    success: function () {
                        alert('The form was submitted successfully');
                    }
                });
            });
        });
    </script>
</body>
</html>
相关问题
最新问题