Sending a object to server with jQuery_问答_开发者

开发者 https://www.devze.com 2023-02-23 15:04 出处：网络

I have a jsfiddle set up because there is a decent amount of code but I will also cp it here. But first the problem.I would like to send the Shape object to the server for processing on mouseup. The

I have a jsfiddle set up because there is a decent amount of code but I will also cp it here.

But first the problem. I would like to send the Shape object to the server for processing on mouseup. The problem I am having is when I add the jQuery ajax or load functions to test the AJAX I get some sort of run away code and everything freezes.

first the code I add so you can try it in the jsfiddle

        $('body').load('index.php/main/add_shape', shape, function () { shape.points["x"]});

Now for the code on the js fiddle for the sake of being able to look at it here and Indexing.

HTML

<body>
    <canvas id="drawn" height="200" width="200">
        <p>Your browser doesn't support HTML5 and the canvas element.  You should probably upgrade to one of the following<br>
            <a href="http://www.google.com/chrome">Google Chrome</a><br>
            <a href="http://www.mozilla.com/">Firefox</a><br>
            <a href="http://www.apple.com/safari/">Safari</a><br>
            <a href="http://www.opera.com/">Opera</a>
         </p>
    </canvas>
</body>

CSS

canvas {
    border: 1px solid #000;
}

JavaScript

var eventMap = { 
   mousemove: "move",
   touchmove: "move",
   mousedown: "down",
   touchstart: "down",
   mouseup: "up",
   touchend: "up"
};

function Shape (type, color, height, width, radius, x, y) {
    this.type = type;
    this.color = color;
    this.h = height;
    this.w = width; 
    this.r = radius;
    this.points = ["x","y"];
    this.points["x"] = [x];
    this.points["y"] = [y];
};

var tools = {}
$(window).ready(function () {
    function init () {
        hex = 000000;
        canvas = $('#drawn').get(0)
        c = canvas.getContext('2d');
        c.lineJoin = "round";
        c.lineCap = "round";
        c.strokeStyle = "#"+hex;
        c.lineWidth = 1;
        tool = new tools['pencil']();
        $('canvas').bind('mousedown mousemove mouseup', mouse_Draw);        
    }

        function mouse_Draw (e) {
        var pos = findPos(this);
        e._x = e.pageX - pos.x;
        e._y = e.pageY - pos.y;
        if (eventMap[e.type] == "down") {
            shapes = new Shape (1, 2, null, null, null, e._x, e._y);
        } else if (eventMap[e.type] == "move") {
            shapes.points["x"].push(e._x);
            shapes.points["y"].push(e._y);
        } else if (eventMap[e.type] == 'up') {
            shapes.points["x"].push(e._x);
            shapes.points["y"].push(e._y);
            alert(shapes.开发者_开发百科points["x"].toString());
        }

        var func = tool[eventMap[e.type]];
        if (func) {
            func(e);            
        }
    }

    init();
});

function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }

}

/*****************TOOLS*************/
tools.pencil = function () {
    var tool = this;
    tool.started = false;

    tool.down = function (e) {
        c.beginPath();
        c.moveTo(e._x, e._y);
        tool.started = true;
        shape = new Shape (pencil, c.strokeStyle, null, null, null, e._x, e._y);
    };

    tool.move = function (e) {
        if (tool.started) {
            c.lineTo(e._x, e._y);
            c.stroke();
            shape.points["x"].push(e._x);
            shape.points["y"].push(e._y);
        }
    };

    tool.up = function (e) {
        if (tool.started) {
            tool.started = false;
        }
    };
}

As you can see when you add the jQuery load line to the tool.up it freezes.

if you have a nice new browser ...

tool.up = function (e) {
    if (tool.started) {
        tool.started = false;
        alert(JSON.stringify(shape));
    }
};

(or you can steal json code from json.org) then you just have to parse the json serverside

The answer was the object was an infinite loop because of this line

    shape = new Shape (pencil, c.strokeStyle, null, null, null, e._x, e._y);

needed to be

    shape = new Shape ('pencil', c.strokeStyle, null, null, null, e._x, e._y);

Sending a object to server with jQuery

精彩评论

关注公众号

热门标签

图文推荐

Sending a object to server with jQuery

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：