javascript - 从 HTML 创建数组以通过 AJAX 发送

Question

我对此感到异常困难。如果我的表单看起来像这样

HTML

<form id='logForm' method='post' action='seatingProcess.php'>

<span class='close' style='display:none' id='255' desk='9-4' deskval='2-3' changeType='REMOVE'></span>
<span class='close' style='display:none' id='255' desk='7-4' deskval='5-3' changeType='ADD'></span>
<span class='close' style='display:none' id='255' desk='8-4' deskval='8-3' changeType='CHANGE'></span>

<div class='btn btn-primary' type='submit' id='submit'>Submit</div>
</form>

我想要发生的是，当我单击按钮提交表单时，我希望创建 span 中不同元素的数组，以便可以通过 AJAX 发送它进行处理在 PHP 中。您建议我如何这样做？

此外，此信息将根据用户操作以这种形式动态创建。它们都将是跨度的，但将包含或多或少相同的属性，并附加一个值。这个想法是让 php 接收数组，并根据属性“changeType”的内容，生成 SQL 脚本来执行该操作。我可能也需要这方面的帮助。

我所拥有的一切都是关于 javascript 的。我对制作数组一无所知，这就是我需要帮助的地方。上面的 HTML 是一个示例输出，但我会发布生成信息的函数之一。 :

Javascript

    function remDeskId(){
    userObject = $dropObject.find('div.dragTest');
    userObjectChange = 'REMOVESEAT';
    userObjectID = userObject.attr('data-info');
    userObjectDeskID = userObject.attr('data-id');
    userObjectDeskIDVal = 0;
    $('form#logForm').append("<span class='close' style='display:none' id='"+userObjectID+"' desk='"+userObjectDeskID+"' deskval='"+userObjectDeskIDVal+"' changeType='"+userObjectChange+"'></span>");

    userObject.attr({"data-id":""}); //remove desk number for new user location
    userObject.appendTo('#userPool');

}

$('#submit').click(function(){
        // get the form data
        // there are many ways to get this data using jQuery (you can use the class or id also)
        //var formData = {

       // };

        // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : 'seatingProcess.php', // the url where we want to POST
            data        : $('#logForm').serialize(), // our data object

        })
            // using the done promise callback
            .done(function(data) {

                // log data to the console so we can see
                console.log(data); 

                // here we will handle errors and validation messages
            });

        // stop the form from submitting the normal way and refreshing the page
        event.preventDefault();
    });

提前致谢

Answer 1

您可以迭代跨度并创建一个数组。

var spans = $('#logForm span');
var data = [];

 $.each(spans, function(i, item){
     var newItem = {};
     newItem.id = $(item).attr('id');
     newItem.desk = $(item).attr('desk');
     newItem.deskval = $(item).attr('deskval');
     newItem.changeType = $(item).attr('changeType');

     data.push(newItem);
 });