Javascript 在JSON中保存临时数据

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

我是JSON新手，我很难将结果放入一个大对象中，当用户选择“OK”时，该对象将被传输到服务器。有人能帮我编码这个吗？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>

我收到错误：

userMoves未定义

。我理解为什么会发生这种情况，但不知道如何更正

TL；DR

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

---

提前感谢

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

首先，您的

onclick=addDeskid（e）

的大小写不适合调用您的函数，而且它在标记中而不是代码中，所以让我们来解决这个问题

我还稍微更改了您的标记，以便更好地使用我的事件处理程序，使用myAddButton和myRemButton类，做您想做的事情，但我使用了它。我还添加了一个按钮，以便在所有事件触发后记录结果。这就是您获得

[]

当它被记录时，您在那里什么都没有。我在提交时什么都没做，这是您要处理的（ajax调用？）

---

在这里玩：

http://jsfiddle.net/q43cp0vd/1/

您需要在函数之外定义

userMoves

，以便更新它。我看不到

var userMoves=[]

在您的代码中。Twisty知道了！关于这方面的更多信息，我将对此进行一次尝试并向您汇报，但您认为使用JSON是完成我想要做的事情的最佳方式吗？将var userMoves作为一个全局变量，但它不会更新，我所看到的是[]在控制台日志中您使用`$（此）`意味着jQuery可能已经在您的页面上了？这是真的吗？

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));

<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 - 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);
}