即使使用 .on，Ajax 调用也只能工作一次

在过去的两周里，我一直在断断续续地尝试让我的 Ajax 电话工作不止一次，我是自学成才的，并尽力自己解决问题，但这个问题正在杀死我。一些有相同问题的人使用 .on，它似乎对他们有用，但我仍然只能让它工作一次。

这个想法是让用户单击页面上的按钮，为此他们获得了XP。

<div id="AJTestt">Ajax Test</div> 
<script>
$(document).on('click', "#AJTestt", function($id, $SkillOne, $XP) {    
$id = <?php if(isset($_SESSION['id'])) echo $_SESSION['id']; ?>;
$SkillOne = <?php if(isset($SkillOne)) echo $SkillOne; ?>;
$XP = 3;
//get the input value
$.ajax({
url: "ax.php",
cache: "false",
data: {id : $id, SkillOne: $SkillOne, XP: $XP},
dataType: 'text',
type: "POST",
success: function(data){
console.log("Success"); 
console.log(data); 
history.back(); //Just to remove the ax.php bit
},
error: function(){
console.log("Error"); 
console.log(data); 
}
});
});
</script>

/////PHP 代码 (ax.php(

<?php
require_once 'resource/Database.php';
$id = $_POST['id'];
$SkillOne= $_POST['SkillOne'];
$XP = $_POST['XP'];
echo "$id n"; 
echo "$SkillOne n";
echo "$XP n";
if($XP==1){
$SkillOne = $SkillOne +1;
}
else if($XP==2){
$SkillOne = $SkillOne +2;
}
else if($XP==3){
$SkillOne = $SkillOne +3;
}
$sqlUpdate = "UPDATE users SET SkillOne =:SkillOne WHERE id =:id";
$statement = $db->prepare($sqlUpdate);
$statement->execute(array(':SkillOne' => $SkillOne, ':id' => $id));
echo $SkillOne;
?>

第一次一切正常，控制台显示(用于测试目的(： -成功 -标识 -老经验 -Xp 待添加 -新经验

但是，如果我再次单击相同的按钮，它会在控制台中显示完全相同的值。

任何帮助将不胜感激，亲切问候翅膀

我认为就这么简单，但我可能是错的。

click 函数创建一个event对象并使其可用，如下所示，因此您无法以现有方式将变量/数据传递给函数：

.on('click', '#myElement', function(event) {
event.preventDefault();
});

你可以像这样将数据/变量传递给函数(见dataVariable(：

.on('click', '#myElement', dataVariable, function(event) {
doSomethingWith(dataVaraible);
});

如果你真的需要将数据传递给处理程序，那么你可以把$id、$SkillOne和$XP放在一个对象中，并将对象交给处理程序：

var data = { id: 1, skillOne: 'blah', xp: 100 };
.on('click', '#myElement', data, function(event) {
doSomethingWith(data);
});

但是我认为您不需要向函数传递任何东西，无论如何您都可以像这样在里面使用它们

<script>
$(document).on('click', "#AJTestt", function() {    
var $id = <?php if(isset($_SESSION['id'])) echo $_SESSION['id']; ?>,
$SkillOne = <?php if(isset($SkillOne)) echo $SkillOne; ?>,
$XP = 3;
//get the input value
$.ajax({
url: "ax.php",
cache: "false",
data: {id : $id, SkillOne: $SkillOne, XP: $XP},
dataType: 'text',
type: "POST",
success: function(data){
console.log("Success"); 
console.log(data); 
history.back(); //Just to remove the ax.php bit
},
error: function(){
console.log("Error"); 
console.log(data); 
}
});
});
</script>

您每次都会从服务器获得相同的值，因为您每次都向服务器传递相同的值：

$(document).on('click', "#AJTestt", function($id, $SkillOne, $XP) {    
$id = <?php if(isset($_SESSION['id'])) echo $_SESSION['id']; ?>;
$SkillOne = <?php if(isset($SkillOne)) echo $SkillOne; ?>;
$XP = 3;
// ...

您尝试传递给单击处理程序的参数不会执行任何操作 - 单击仅传递event对象，没有其他参数 - 并且在任何情况下，您都会立即将它们替换为固定值。(PHP 包含仅在页面加载时解释一次;如果服务器上的基础数据发生变化，它们不会实时更新。

如果您希望更新值，则需要将从 AJAX 调用返回的数据(如果我极其生疏的 PHP 技能没有误导我，这似乎只是 $SkillOne 的内容(存储在变量中，以便新值可以在下一次调用时传递给服务器。目前，除了将该返回值记录到控制台之外，您没有对该返回值执行任何操作。

例如，在这里，在全局变量中加载一次包含 PHP 的值(不是理想的做法，但足以进行演示(，然后可以在每次 ajax 调用时更新这些值：

var $SkillOne = <?php if(isset($SkillOne)) echo $SkillOne; ?>; // probably need an `else` here too, for a default value
var $id = <?php if(isset($_SESSION['id'])) echo $_SESSION['id']; ?>;
var $XP = 3;
$(document).on('click', "#AJTestt", function() { 
$.ajax({
url: "ax.php",
cache: "false",
data: { id: $id, SkillOne: $SkillOne, XP: $XP },
dataType: 'text',
type: "POST",
success: function(data) {
console.log("Success");
$SkillOne = data; // update the $SkillOne variable with the new value
// history.back(); // Do not do this; ajax calls do not change the history stack; you'll bump the user to the page they were on previously.
},
error: function() {
console.log("Error");
console.log(data);
}
});
});

我将向您提出以下解决方案。这样的解决方案将基于我对你的帖子的理解。如果它不调整，请告诉我。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="mybutton">Press Me to gain XPs</button>
</body>
<script>
$(document).ready(function(){
$("#mybutton").click(function(){
$.ajax({
url: "ax.php",
cache: "false",
dataType: 'text',
type: "POST",
success: function(data){
console.log("Success"); 
console.log(data); 
history.back(); //Just to remove the ax.php bit
},
error: function(){
console.log("Error"); 
console.log(data); 
}
});
});
});
</script>
</html>

对于后端，我会这样做：

<?php
if (! isset($_SESSION['id'])) {
return;
}
$pdo = new PDO("mysql:host=127.0.0.1;dbname=yourdb", 'root', 'password');
// change according to your id type
$sql = sprintf("SELECT user_xp FROM users WHERE id=%d", $_SESSION['id']);
$retrieved_info = $pdo->query($sql);
$current_xp;
if ($retrieved_info) {
$info = $retrieved_info->fetchAll(PDO::FETCH_ASSOC);
$current_xp = $info[0]['user_xp'];
}

if ($current_xp == 1) {
$pdo->exec("UPDATE users SET user_xp=%d WHERE id=%d", $current_xp+1, $_SESSION['id']);
} // and so on....
echo $current_xp;
?>

让我知道这是否是你需要的，它正在工作。

相关内容

最新更新

热门标签：