Question

我有两个按钮，每个按钮执行相同的功能但只有一个变量。我使用ajax来处理一些PHP。我认为问题是ajax在js函数之前运行。

您是否有任何解决方案可以沿特定按钮点击传递参数？

$('.button').click(function(){      
    $.ajax({
        type: "POST",
        data: {
            userid: <?php echo $userid ?>,
            upgradePrice: price,
            resource: upgResource
        },
        url: "UpgradeResHandler.php",
        dataType: "json",
        async: true,
        beforeSend: function(){
            $(".ajaxTest").text("Trying to upgrade...");
        },
        success: function(data) {
            $(".ajaxTest").text(data.a);
            if (data.b == "true") {
                location.reload();
            }
        }
    }); 
});

function setResource(resource) {
    var upgResource = resource;
}

<input type="submit" class="button" name="upgGold" value="Upgrade" onclick="setResource('gold')" />
<input type="submit" class="button" name="upgMetal" value="Upgrade" onclick="setResource('metal')" />

Answer 1

每个元素只能有1个onclick事件处理程序。尝试将ajax调用放在你正在调用的函数中，然后摆脱$('.button').click();处理程序。

function setResource(resource) {
    var upgResource = resource;
    $.ajax({
        type: "POST",
        data: {
            userid: <?php echo $userid ?>,
            upgradePrice: price,
            resource: upgResource
        },
        url: "UpgradeResHandler.php",
        dataType: "json",
        async: true,
        beforeSend: function(){
            $(".ajaxTest").text("Trying to upgrade...");
        },
        success: function(data) {
            $(".ajaxTest").text(data.a);
            if (data.b == "true") {
                location.reload();
            }
        }
    }); 
}

Answer 2

这是推荐给你的。删除输入上的setResource（）函数和onclick属性。而只需使用您想要传递的值填充属性。我在这里使用数据资源。您可以使用.attr（）jquery方法访问任何jquery元素属性。在这个观察者中，$（this）是你点击的元素。所以他将拥有该属性的良好价值。这种方法可以节省您的功能和变量分配。

$('.button').click(function(){      
    $.ajax({
        type: "POST",
        data: {
            userid: <?php echo $userid ?>,
            upgradePrice: price,
            resource: $(this).attr('data-resource')
        },
        url: "UpgradeResHandler.php",
        dataType: "json",
        async: true,
        beforeSend: function(){
            $(".ajaxTest").text("Trying to upgrade...");
        },
        success: function(data) {
            $(".ajaxTest").text(data.a);
            if (data.b == "true") {
                location.reload();
            }
        }
    }); 
});

<input type="submit" class="button" name="upgGold" value="Upgrade" data-resource="gold" />
<input type="submit" class="button" name="upgMetal" value="Upgrade" data-resource="metal" />

如果您希望保持onclick并且功能正常，则可以将ajax调用传递给该函数并删除jquery观察器。同样的工作将完成。我的方法只使用jQuery资源。

Answer 3

也许ajax执行它们是同步的，你必须只调用该函数。您是否尝试在函数setResource（）上使用（.button）.click（）上的代码？也许这样会起作用......给我一些关于结果的反馈

Answer 4

在jQuery ajax方法的data下，更改：

resource: upgResource

...为：

resource: $(this).attr('name')

并且丢失了setResource功能，并且都丢失了onclick个处理程序。

然后更新您的PHP脚本以处理值＆＃34; upgGold＆＃34; 和＆＃34; upgMetal＆＃34; 而不是＆＃34; gold＆＃34; 和＆＃34; metal＆＃34; ，或者将按钮name属性更改为＆＃34; gold＆＃34; 和＆＃34; metal＆＃34; 。

JSFiddle me

所有在一起：

$('.button').click(function(){      
    $.ajax({
        type: "POST",
        data: {
            userid: <?php echo $userid ?>,
            upgradePrice: price,
            resource: $(this).attr('name')
        },
        url: "UpgradeResHandler.php",
        dataType: "json",
        async: true,
        beforeSend: function(){
            $(".ajaxTest").text("Trying to upgrade...");
        },
        success: function(data) {
            $(".ajaxTest").text(data.a);
            if (data.b == "true") {
                location.reload();
            }
        }
    }); 
});

<input type="submit" class="button" name="upgGold" value="Upgrade" />
<input type="submit" class="button" name="upgMetal" value="Upgrade" />

AJAX：沿特定按钮传递变量单击

4 个答案: