Question

在过去的两周里，我一直在反复尝试使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;
?>

一切正常后，控制台会显示（出于测试目的）： -成功 -ID -老XP -Xp要添加 -新Xp

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

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

Answer 1

我想这很简单，但是我可能错了。

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>

Answer 2

我将为您提出以下解决方案。这样的解决方案将基于我对您的帖子的了解。让我知道它是否无法调整。

<!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;

?>

让我知道这是否是您所需要的并且是否有效。

Answer 3

每次都从服务器获取相同的值，因为每次都将相同的值传递给到服务器：

$(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);
    }
  });
});

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

3 个答案: