Question

我试图用ajax将点击按钮的值发送到我的php文件。即用户单击btn1，然后值1应推入数组，ajax应将其发送到我的文件screen.php。

我的控制台现在显示Yay it worked

我的js：

jQuery(document).ready(function($){
    var ajaxurl = 'screen.php';
    $values = [];
    $('.ui-btn').click(function(){
    $values.push($(this).val());
});
$.ajax({
       url: ajaxurl,
        type: 'post',
        data: {
            buttons: $values,
        },
        success: function (result) {
           console.log('Yay it worked' + $values);
        },
        error: function (xhr, ajaxOptions, thrownError) {
           console.log('Something went wrong');
        }
    });
});

我的HTML

 <div>
    <button name="btn1" type="submit" id="btn1" value="1" class="ui-btn"></button>
    <button name="btn2" type="submit" id="btn2" value="2" class="ui-btn"></button>
    </div> // I have up to 9 buttons, thats only a piece

Answer 1

我对您的代码进行了一些修改，希望能够达到您想要的效果。这将保存一组值，并在每次单击按钮时将其POST到您的php脚本。我删除了一些未使用的变量并清理了缩进。我不能说它是否会在接收端工作，因为我看不到php文件。

var values = [];

jQuery(document).ready(function($){

    $('.ui-btn').click(function() {
        values.push($(this).val());
        $.ajax({
            url: 'screen.php',
            type: 'post',
            data: {
                buttons: values,
            },
            success: function() {
               console.log('Yay it worked', values);
            },
            error: function() {
               console.log('Something went wrong');
            }
        });
    });
});

Answer 2

如果您希望每次单击按钮时都调用ajax，则需要将其放在按钮事件处理程序的回调中。现在，您的代码在文档准备好后调用ajax一次。在单击任何按钮之前，文档准备就绪时，首先使用空数组。将ajax调用放在click回调中，每次都应该使用更新的数组调用ajax。

推送数组中单击元素的值

2 个答案: