javascript - 在 JSON 中保存临时数据

Question

我的项目的某个方面确实需要帮助。我的最终目标是捕获用户所做的更改，一旦他们选择确认，将其发布到 SQL 进行更新。我将在项目的后半部分使用 AJAX 和 PHP，但我认为 JSON 是保存用户所做的所有更改(第一部分)的好主意。

我是 JSON 的新手，我无法将结果放入一个大对象中，当用户选择“确定”时，该对象将被传输到服务器。有人可以帮我编码吗？ JSON 是实现目标(临时存储？

这是我目前所拥有的(只是一个片段):

HTML

<div class="button" data-info='2' data-id='8-7' onclick=addDeskid(e)></div>
<div class="button" data-info='4' data-id='2-5' onclick=remDeskId()></div>
<div class="button" value="submit">submit</div>

JS

function addDeskId(e){
    $adjustment;
    userObject = $(this); 
    userObjectChange = 'CHANGE_SEAT_TO'; //This is what i will use with AJAX and PHP to determine the SQL statement
    userObjectID = userObject.attr('data-info'); //This is the unique SQL ID for the object being modified
    userObjectDeskID = userObject.attr('data-id'); //This is the attribute for the object being modified
    userObjectSeatID = 9-4; //This is what the attribute is being modified to, for the question, ill make it a solid value
    var addUserObject = new jsonAddTest(userObjectID, userObjectChange, userObjectDeskID, userObjectSeatID,);

    //this is what the function is actually doing on the user side
    //$dragObject.attr("data-id",newSeat); //change desk number for new user location
    //$dragObject.attr("previousseat", "T");
    //var extPass = e;
    //moveOrSetupAccountLog(extPass);

}
function remDeskId(){
    userObject = $dropObject.find('div.dragTest');
    userObjectChange = 'REMOVESEAT'; //This is what i will use with AJAX and PHP to determine the SQL statement
    userObjectID = userObject.attr('data-info'); //This is the unique SQL ID for the object being modified
    userObjectDeskID = userObject.attr('data-id'); //This is the attribute for the object being modified
    userObjectDeskIDVal = 0; //This is what the attribute is being modified to

    var remUserObject = new jsonRemTest(userObjectID, userObjectChange, userObjectDeskID, userObjectDeskIDVal);

    //this is what the function is actually doing on the user side
    //userObject.attr({"data-id":""}); //remove desk number for new user location
    //userObject.appendTo('#userPool');



}

    //JSON functions test
function jsonRemTest(id, change, name, seat, value){
    this.ID = id;
    this.ChangeType = change;
    this.Name = name;
    this.Seat = seat;
    this.setTo = value;

            userMoves.push(jsonRemTest);

}
function jsonAddTest(id, change, name, desk, seat, previousseat, previousseatnewvalue){
    this.ID = id;
    this.ChangeType = change;
    this.Name = name;
    this.Seat = desk;
    this.setTo = seat;
    this.PreviousSeatValue = previousseat;
    this.PreviousSeatNewValue = previousseatnewvalue;

            userMoves.push(jsonAddTest);

}
console.log(JSON.stringify(userMoves));

我收到错误:userMoves 未定义。我明白为什么会这样，但我不知道如何纠正。

长话短说

每次用户点击这个按钮，它都会生成一个数组。我想将所有数组组合成一个包含所有数组的对象。当用户单击提交按钮时，对象将使用 AJAX/PHP 发送到服务器。这是执行此操作的最佳方法吗？如果是，我如何将 JSON 函数的输出组合到一个对象中以准备发送？

提前致谢

Answer 1

好的，让我们通过一些建议来解决这个问题。

首先，您的 onclick=addDeskid(e) 的大小写不正确，无法调用您的函数，好吧，它在标记中而不是代码中，所以让我们解决这个问题。

我还稍微更改了您的标记，以便更好地使用我的事件处理程序，使用 myAddButton 和 myRemButton 的类，做你想做的，但我用了它。我还添加了一个按钮，用于在所有事件触发后记录结果。这就是你得到 [] 的原因，当它被记录时你什么也没有。我对提交没有做任何事情，这是你的处理(ajax 调用？)

<div class="button myAddButton" data-info='2' data-id='8-7'>add</div>
<div class="button myRemButton" data-info='4' data-id='2-5'>remove</div>
<div class="button mySubmitButton">submit</div>
<button id="ShowResults" type='button'>ShowResults</button>

现在是代码 - 我重新设计了它以使用 makeClass 为对象创建一个“类”。这只是一种方式，但确实允许在需要时使用实例对象，并且可以更轻松地为某些函数命名。我人为地在其中放置了一个私有(private)函数，只是为了演示使用以及公共(public)函数。请注意，该函数中的“this”是实例对象而不是全局对象。 (谷歌 makeClass 与署名作者以获取更多信息)

我创建了一个具有通用属性的“类”。您可以为“添加”和“删除”创建不同的函数，而不是 SetChangeObject 函数 - 就像每个函数一样......我使用了一个通用函数，因此“对象”具有相同的签名。

现在的代码:这在某些地方肯定有点人为只是为了演示使用:

// makeClass - By Hubert Kauker (MIT Licensed)
// original by John Resig (MIT Licensed).
function makeClass() {
    var isInternal;
    return function (args) {
        if (this instanceof arguments.callee) {
            if (typeof this.init == "function") {
                this.init.apply(this, isInternal ? args : arguments);
            }
        } else {
            isInternal = true;
            var instance = new arguments.callee(arguments);
            isInternal = false;
            return instance;
        }
    };
}

var SeatGroup = makeClass(); //create our class
//the method that gets called on creation instance object of class
SeatGroup.prototype.init = function (id, changeType, name, desk, seat, setToValue, previousseat, previousseatnewvalue) {
    // a default value
    var defaultSeat = "default";
    var defaultName = "default";

    this.ID = id;
    this.ChangeType = changeType;
    this.Name = name ? name : defaultName;
    this.Desk = desk ? desk : "";
    this.Seat = seat ? seat : privateFunction(defaultSeat);;
    this.SetTo = setToValue ? setToValue : this.ID;
    this.PreviousSeatValue = previousseat ? previousseat : "";
    this.PreviousSeatNewValue = previousseatnewvalue ? previousseatnewvalue : "";

    this.changeObject = {};

    // public method
    this.SetChangeObject = function () {
        this.changeObject.ID = this.ID;
        this.changeObject.ChangeType = this.ChangeType;
        this.changeObject.Name = this.Name;
        this.changeObject.Seat = this.Seat;
        this.changeObject.Desk = this.Desk;
        this.changeObject.SetTo = this.SetTo;
        this.changeObject.PreviousSeatValue = this.PreviousSeatValue;
        this.changeObject.PreviousSeatNewValue = this.PreviousSeatNewValue;
    };

    function privateFunction(name) {
        return name + "Seat";
    }
};
var userMoves = [];//global warning-global object!!

//event handlers
$('.myAddButton').on('click', addDeskId);
$('.myRemButton').on('click', remDeskId);
$('#ShowResults').on('click', function () {
    console.log(JSON.stringify(userMoves));//log this after all are pushed
});

//function called with the "add" that can be customized
function addDeskId(e) {
    var uo = $(this);//jQuery of the "myAddButton" element
    var userObjectChange = 'CHANGE_SEAT_TO';
    var userObjectID = uo.data('info');
    var userObjectDeskID = uo.data('id');
    var userObjectSeatID = '9-4';
    // create a private instance of our class (calls init function)
    var uChange = SeatGroup(userObjectID, userObjectChange, userObjectDeskID, userObjectSeatID);
    uChange.SetChangeObject();//call public function
    //log what we created
    console.dir(uChange.changeObject);
    //does not work, its private:  console.log(  uChange.privateFunction('hi'));
    // push to our global
    userMoves.push(uChange.changeObject);
}

// event function, customize as needed
function remDeskId() {
    var userObject = $(this);
    var userObjectChange = 'REMOVESEAT';
    var userObjectID = userObject.data('info');//use jQuery data, easier/better
    var userObjectDeskID = userObject.data('id');
    var userObjectDeskIDVal = 0;
    var remUserObject = SeatGroup(userObjectID, userObjectChange, userObjectDeskID);
    remUserObject.PreviousSeatValue = "FreddySeat";//show how we set a properly of our object
    remUserObject.SetChangeObject();//call public function
    console.dir(remUserObject.changeObject);
    userMoves.push(remUserObject.changeObject);
}

在这里试一试:http://jsfiddle.net/q43cp0vd/1/