即使使用 .on，Ajax 調用也只能工作一次
[英]Ajax call only works once even with .on
問題描述
在過去的兩周里，我一直在斷斷續續地嘗試讓我的 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; ?>
第一次一切正常，控制台顯示（用於測試目的）： -Success -ID -Old Xp -Xp to be added -New Xp
但是如果我再次單擊同一個按鈕，它會在控制台中顯示完全相同的值。
任何幫助將不勝感激，親切的問候翅膀
3 個解決方案
解決方案1
1 2018-08-19 17:19:42
我想就這么簡單，但我可能是錯的。
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>
解決方案2
0 2018-08-19 17:26:19
我將向您提出以下解決方案。 這種解決方案將基於我對您的帖子的理解。 如果它不調整，請告訴我。
<!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;
?>
讓我知道這是否是您需要的並且它正在工作。
解決方案3
0 已采納 2018-08-19 18:05:17
你從服務器，因為你每次都傳遞相同的值到服務器的每一次得到同樣的價值觀：
$(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);
}
});
});
Rails 4 Ajax調用僅工作一次
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.