csdn产品小助手 2015-11-04 17:06 采纳率: 0%
浏览 62

用JSON保留临时数据

I really need help with an aspect of my project. My ultimate goal is to capture the changes made by a user and once they select confirm, post it to SQL for updating. I will use AJAX and PHP for the latter part of the project but I thought JSON would be a great idea to hold all the changes made by a user (the first part).

I am new to JSON and I'm having trouble putting the results in one large object that will be transferred to the server when the user selects "OK". Can someone help me with the coding of this? Is JSON the best way to accomplish the goal (of storing temporary?

Heres what I have so far (just a snippet):

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

I am getting the error: userMoves is undefined. I understand why this is happening but I don't know how to correct it.

TL;DR

Every time the user clicks on this button, it generates an array. I want to combine all the arrays into one object that contains all of them. When the user clicks on a submit button, the object is sent to the server using AJAX/PHP. Is this the best way to do this and if so, how do I combine the output of the JSON functions into one object in preparation for sending?

Thanks in advance

  • 写回答

1条回答 默认 最新

  • weixin_33695450 2015-11-04 19:54
    关注

    OK, Let's tackle this with some recommendations.

    First off your onclick=addDeskid(e) is not properly cased to call your function and well, it is in the markup not the code, so let's address that.

    I also changed your markup slightly to work with my event handlers better using a class for myAddButton and myRemButton, do what you will with that but I used it. I also added a button to get the results logged after all the events fired. This is the reason you get [] you have nothing in there when it gets logged. I did nothing with the submit, that is yours to handle (ajax call?)

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

    Now the code - I re-engineered this to create a "class" for the object using makeClass. This is just one way but does allow for instance objects when needed and makes it easier to namespace some functions. I artificially put a private function in there just to demonstrate use as well as a public function. Note the the "this" inside that function is the instance object NOT a global object. (google makeClass with the attributed authors for more info)

    I created a "class" with generic attributes. You COULD create different functions for "add" and "remove" instead of the SetChangeObject function - like one for each...I used a generic one so the "object" has the same signature.

    Now the code: this is definitely a bit artificial in some places just to demonstrate use:

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

    Play around with it here: http://jsfiddle.net/q43cp0vd/1/

    评论

报告相同问题?

悬赏问题

  • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果