发送一个对象到jQuery服务器

我有一个jsfiddle设置，因为有一个相当数量的代码，但我也会在这里cp它。发送一个对象到jQuery服务器

但首先是问题。我想将Shape对象发送到服务器以便在mouseup上进行处理。我遇到的问题是当我添加jQuery ajax或加载函数来测试AJAX时，我得到某种跑掉的代码并且一切都冻结了。

首先我加那么你的代码可以在jsfiddle

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

尝试它现在对JS的捣鼓了能够看它这里和索引着想的代码。

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

正如你可以看到，当您添加了jQuery LO广告热线tool.up冻结。

来源

2011-04-12 austinbv

我检查了小提琴。似乎正在为我工作。 – 2011-04-12 02:47:05

小提琴的作品，因为它没有加载一个真正的网址 – austinbv 2011-04-12 02:47:55

我更新了jsfiddle的基础，所以它去/ echo/json – austinbv 2011-04-12 02:58:02

，如果你有一个很好的新的浏览器需要...

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

（或者你可以从json.org中窃取json代码），那么你只需要解析json serverside

来源

2011-04-12 04:30:36

答案是对象是一个无限循环，因为这条线的

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

是

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

来源

2011-04-12 04:13:25 austinbv

发送一个对象到jQuery服务器

回答

相关问题