Envoyer un objet au serveur avec jQuery

J'ai un jsfiddle mis en place parce qu'il y a une quantité décente de code mais je vais aussi le cp ici.Envoyer un objet au serveur avec jQuery

Mais d'abord le problème. Je voudrais envoyer l'objet Shape au serveur pour le traitement sur mouseup. Le problème que j'ai est quand j'ajoute les fonctions jQuery ajax ou charge pour tester l'AJAX je reçois une sorte de code d'enfouissement et tout gèle.

d'abord le code ajouter vous pouvez donc l'essayer dans le jsfiddle

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

maintenant le code sur le violon js pour le bien de pouvoir regarder ici et de l'indexation.

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

Comme vous pouvez le voir lorsque vous ajoutez le lo jQuery ligne de publicité au tool.up il se bloque.

Source

2011-04-12 austinbv

J'ai vérifié le violon. Je semble travailler pour moi. –

Le violon fonctionne parce qu'il ne charge pas une vraie url – austinbv

J'ai mis à jour la base du jsfiddle de sorte qu'il va à/echo/json – austinbv

si vous avez un beau nouveau navigateur ...

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

(ou vous pouvez voler le code json de json.org) alors il vous suffit d'analyser le serveur côté json

Source

2011-04-12 04:30:36

La réponse a été l'objet était une boucle infinie à cause de cette ligne

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

devait être

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

Source

2011-04-12 04:13:25 austinbv

Envoyer un objet au serveur avec jQuery

Répondre

Questions connexes