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

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

javascript jquery html ajax

Javascript Ajax调用即使使用.on也只能工作一次,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,在过去的两周里，我不停地尝试让我的Ajax调用工作不止一次，我自学成才，并尽我最大的努力自己解决问题，但这个问题正在折磨着我。一些有同样问题的人使用了.on，它似乎对他们有效，但我仍然只能让它工作一次这个想法是让用户点击页面上的一个按钮，从而获得XP Ajax测试 $（文档）.on（'click'，“#AJTestt”，函数（$id，$SkillOne，$XP）{ $id=； $SkillOne=； $XP=3； //获取输入值 $.ajax({ url:“ax.php”，缓存：“fals

在过去的两周里，我不停地尝试让我的Ajax调用工作不止一次，我自学成才，并尽我最大的努力自己解决问题，但这个问题正在折磨着我。一些有同样问题的人使用了.on，它似乎对他们有效，但我仍然只能让它工作一次

这个想法是让用户点击页面上的一个按钮，从而获得XP

Ajax测试
$（文档）.on（'click'，“#AJTestt”，函数（$id，$SkillOne，$XP）{
$id=；
$SkillOne=；
$XP=3；
//获取输入值
$.ajax({
url:“ax.php”，
缓存：“false”，
数据：{id:$id，SkillOne:$SkillOne，XP:$XP}，
数据类型：“文本”，
类型：“POST”，
成功：功能（数据）{
控制台日志（“成功”）；
控制台日志（数据）；
history.back（）；//仅删除ax.php位
},
错误：函数（）{
控制台日志（“错误”）；
控制台日志（数据）；
}
});
});

我认为这很简单，但我可能错了

click函数创建一个

事件

对象，并使其如下所示可用，因此您不能以如下方式将变量/数据传递给函数：

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

您可以像这样将数据/变量传递给函数（请参见

dataVariable

）：

如果确实需要将数据传递给处理程序，则可以将

$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>


$（文档）.on（'click'，“#AJTestt”，function（）{
变量$id=，
$SkillOne=，
$XP=3；
//获取输入值
$.ajax({
url:“ax.php”，
缓存：“false”，
数据：{id:$id，SkillOne:$SkillOne，XP:$XP}，
数据类型：“文本”，
类型：“POST”，
成功：功能（数据）{
控制台日志（“成功”）；
控制台日志（数据）；
history.back（）；//仅删除ax.php位
},
错误：函数（）{
控制台日志（“错误”）；
控制台日志（数据）；
}
});
});

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

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


标题
按我获取XPs
$（文档）.ready（函数（）{
$（“#我的按钮”）。单击（函数（）{
$.ajax({
url:“ax.php”，
缓存：“false”，
数据类型：“文本”，
类型：“POST”，
成功：功能（数据）{
控制台日志（“成功”）；
控制台日志（数据）；
history.back（）；//仅删除ax.php位
},
错误：函数（）{
控制台日志（“错误”）；
控制台日志（数据）；
}
});
});
});

对于后端，我会这样做：

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

?>

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

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

$(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;
    // ...

我看到您在哪里执行查询，但没有对响应执行任何操作。您需要添加类似$result=$statement->fetch（）的内容；返回$result[0]；要返回响应，我感觉您将PHP和javascript代码混为一谈。我只是想知道它是如何工作的，至少有一次，你能解释一下这个

函数（$id，$SkillOne，$XP）

Hi Black Mamba，我创建了这样的函数，因为我将多次重复使用它，用于不同的技能和不同数量的XP。我使用用户id、他们的技能（其中有多个）以及我想给他们多少XP。嘿，Martin，谢谢你的时间和详细的回答，你说得对，我不需要向函数传递任何东西，它使用你改进的方式工作。然而，不工作一次以上的问题仍然存在。我认为这可能暗示这是一个php问题？谢谢你的翅膀

$(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;
    // ...

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