Question

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

我是JSON的新手，我在将结果放入一个大对象时遇到问题，当用户选择＆＃34; OK＆＃34;时，该对象将被转移到服务器。有人可以帮我编码吗？ 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的类来处理我的事件处理程序，使用它做你想做的但是我用它。我还添加了一个按钮，以便在所有事件触发后记录结果。这就是你得到[]时没有任何内容的原因。我没有对提交做任何事情，那是你的处理（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为对象创建一个“类”。这只是一种方式，但在需要时允许实例对象，并且更容易命名一些函数。我在那里人为地设置了一个私人功能，只是为了展示使用和公共功能。请注意，该函数中的“this”是实例对象，而不是全局对象。（google 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/

在JSON中保存临时数据

1 个答案: