我正在尝试创建一个可跟踪收入和支出的页面。但是，一旦单击页面上的send按钮，Ajax只会在第一次返回成功，因此alert(successNum)函数仅在50％的时间内起作用。
这是 index.php ，ajax调用位于其中。
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script>
<script src="https://kit.fontawesome.com/2c66dc83e7.js" crossorigin="anonymous"></script>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Arpad Media IO</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 align=center>Budget</br><button class="btn btn-warning" data-toggle="modal" data-target="#budgetModal">Add entry</button></h1>
<table class="budget_table">
<tr><td><h3>Incomes</h3></td>
<td><h3>Expenses</h3></td></tr>
<tr>
<td><table class="income_table money_table"><tr>
<?php
$query = "SELECT * FROM `main_budget` WHERE `Type` = 'INC' ORDER BY `Date` DESC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row){
echo '<tr><td><h3 class="text text-success">+'.$row["Amount"].' Ft</h3><h5>'.$row["Description"].'</h5></td></tr>';
}
?>
</tr></table></td>
<td><table class="expense_table money_table "><tr>
<?php
$query = "SELECT * FROM `main_budget` WHERE `Type` = 'EXP' ORDER BY `Date` DESC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row){
echo '<tr><td><h3 class="text text-danger">-'.$row["Amount"].' Ft</h3><h5>'.$row["Description"].'</h5></td></tr>';
}
?>
</tr></table></td>
</tr></table>
<?php
$query = "SELECT * FROM `main_budget` ORDER BY `Date` DESC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$TotalMoney=0;
foreach($result as $row){
if ($row["Type"]=="EXP"){
$row["Amount"]=$row["Amount"]*-1;
}
$TotalMoney += $row["Amount"];
}
echo '<h4 class="finalValue">Total: '.$TotalMoney.' Ft</h4>';
$connect=null;
?>
<div class="modal fade" id="budgetModal" tabindex="-1" role="dialog" aria-labelledby="budgetModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Entry</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="sendBudgetForm">
<select class="form-control" id="budgetTypeSelect">
<option value="INC">Income</option>
<option value="EXP">Expense</option>
</select>
<input class="form-control" id="budgetName" type="text" placeholder="Title"></input>
<input class="form-control" id="budgetValue" type="number" placeholder="Amount"></input>
<input type="hidden" id="userName" value=<?php echo $_SESSION["UserUserName"];?>></input>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<input type="submit" id="sendBudget" class="btn btn-primary" value="Send"></input>
</form>
</div>
</div>
</div>
</div>
</html>
<script>
$('#sendBudgetForm').on('submit', function () {
var bType = $( "#budgetTypeSelect").val();
var bName = document.getElementById('budgetName').value;
var bVal = document.getElementById('budgetValue').value;
var bUser = document.getElementById('userName').value;
$.ajax({
url:"budgetHandler.php",
type:"POST",
data:{bType:bType, bName:bName, bVal:bVal, bUser:bUser},
success:function(successNum){
alert(successNum);
},
error: function(jqXHR, textStatus, errorThrown){
alert('error');
}
})
});
</script>
budgetHandler.php 看起来像这样：
<?php
session_start();
$connect = new PDO("mysql:host=localhost;dbname=budget", "root", "password");
if(isset($_POST["bVal"]))
{
$query="INSERT INTO `main_budget` (`Author`, `Type`, `Description`, `Amount`)
VALUES (:author, :typee, :descriptionn, :amount)";
$statement = $connect->prepare($query);
$statement->execute(
array(
':author' => $_POST['bUser'],
':typee' => $_POST['bType'],
':descriptionn' => $_POST['bName'],
':amount' => $_POST['bVal']
)
);
$connect=null;
echo "1";
}
?>
我尝试添加 datatype：'text'标记，但没有帮助。
答案 0 :(得分：0)
将事件绑定更改为 $（'＃sendBudgetForm'）。on（'submit'，函数（e）{，然后添加 e.preventDefault（）; < strong> $（'＃budgetModal'）。modal（'hide'）; 并向Ajax调用的成功函数添加 location.reload（）; 似乎可以解决我的错误！