在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 is undefined。我明白爲什麼會發生這種情況寧，但我不知道如何糾正它。

TL; DR

每次用戶點擊該按鈕時，它產生的陣列。我想將所有數組合併成一個包含所有數組的對象。當用戶點擊提交按鈕時，使用AJAX/PHP將對象發送到服務器。這是做這件事的最好方法嗎？如果是這樣，我如何將JSON函數的輸出結合到一個對象中以準備發送？

在此先感謝

Answer 1

好的，讓我們解決這個問題，並提出一些建議。

首先你的onclick=addDeskid(e)沒有適當的調用你的函數，它不在代碼中，所以讓我們來解決這個問題。

我也稍微改變了你的標記，以更好地使用myAddButton和myRemButton的類來處理我的事件處理程序，盡你所能，但我使用它。我還添加了一個按鈕，以在所有事件發生後記錄結果。這就是你得到[]的原因，當它被記錄時你沒有任何內容。我什麼也沒做與提交，這是你的處理

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

現在代碼（AJAX調用？） - 我重新設計了該應用程序創建使用makeClass該對象的「類」。這只是一種方法，但在需要時允許實例對象，並使名稱空間更容易一些功能。我爲了演示使用以及公共功能而人爲地設置了一個私有函數。請注意，該函數中的「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/