所以，我需要使用 ajax 来提交表单(单击 6 个按钮中的任何一个并在数据库中增加 1 个字段(。我想我的功能是正确的(好吧，如果我这样做了，它就会工作(，但它在每次提交后仍然刷新页面。我在这里做错了什么？
我的PHP和HTML都在同一个页面内(索引.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
}
?>- 将属性添加到表单标签：onsubmit="return false">
- 将按钮类型从"提交"更改为"按钮">
-
你的代码应该是这样的：
$(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'); } }); }); });
附言如果出现问题，请告诉我。-------更新----------试试这个代码：
<?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>