让一个按钮使用jQuery发送AJAX put请求

Have a button send an AJAX put request using jQuery

本文关键字：jQuery 发送 AJAX 请求 put 按钮 一个      更新时间：2023-09-26

我对ajax不太熟悉，需要一些帮助。我成功地循环了一个json提要，并在它自己的div中输出信息。每个对象都附加了一个布尔值。根据布尔值是true还是false，一些css类会发生变化。我想知道如何让内联按钮将当前对象从false设置为true。下面是我的代码。没有HTML，jquery正在创建DOM。

$(document).ready(function () {
    // Layout Output
    $('body').prepend('<div class="container"></div>');
    container = $('.container');
    $(container).append('<div class="quickselect"><select id="selectField"></select></div>');
    selectDropDown = $('#selectField');
    $(selectDropDown).append('<option value="option1">Class1</option><option value="option2">Class 2</option>');
    options = [];
    options.push('<div id="option1" class="box"><p>12/13/2012</p><p>1:00:00 PM</p><p>Auditorium B</p></div>');
    options.push('<div id="option2" class="box"><p>12/13/2012</p><p>1:00:00 PM</p><p>Auditorium A</p></div>');
    $(selectDropDown).after(options);
    $(container).append('<div class="userlist"></div>');
    userList = $('.userlist');
    $(userList).prepend('<button>Set All as Attended</button>')
    users = [];
    users.push('<div class="usercontainer">Dillon Raphael1 <button>Set as Attended</button></div>');
    users.push('<div class="usercontainer">Dillon Raphael2 <button>Set as Attended</button></div>');
    users.push('<div class="usercontainer">Dillon Raphael3 <button>Set as Attended</button></div>');
    fetchUsers = function() {
        $.getJSON("http://www.json-generator.com/j/cuPmRkQQjm?indent=4", function( data ) {
            $.each(data, function(key, val) {
                if(val.attended == true) {
                users.push('<div class="usercontainer">' + val.name +' ' + val.attended + '<button type="button" disabled class="attended">Attended</button></div>');
                } else {
                users.push('<div class="usercontainer">' + val.name +' ' + val.attended + '<button class="unattended">Set as Attended</button></div>'); 
                }
            });
            $(userList).append(users);
        });
    }
    fetchUsers();
});

将要按下以更改布尔值的按钮是

$('.userlist').on('click', 'button', function(event){
  var $button = $(event.currentTarget);
  var $container = $button.closest('.usercontainer');
  //now you can change data- attributes of div.usercontainer or classes...
  $container.data('attended', true);
  $container.toggleClass('attended unattended');
  //etc.
});

这是你需要的吗？

相关文章：