AJAX POST状态不一致400。图像复杂性问题

我们的团队开发了一个基于JS HTML5画布的绘画应用程序。在下面的代码中，图像数据作为base64编码从画布中获取，并通过ajax发布到servlet。数据发布行为不稳定。如果图像很简单（如直线），我得到Ajax status=200并保存图像。如果图像很复杂，那么我会得到一个状态=400，并且数据不会保存。 为什么帖子的内容会在发布数据时产生问题

function getCode(){

 var canvas = document.getElementById('imageView');
 var context = canvas.getContext('2d');

 // draw cloud
  context.beginPath();

 // save canvas image as data url 
  var dataURL = canvas.toDataURL();

  // set canvasImg image src to dataURL
  // so it can be saved as an image
   document.getElementById('canvasImg').src = dataURL;

  var uri= document.getElementById('canvasImg').src;


  uri = uri.replace('data:image/png;base64,','');
  uri = uri.replace('=', '');

  uri = uri.trim();

 alert("uri is "+uri);

  var ajaxobject ;
    if(window.XMLHttpRequest){
    ajaxobject = new XMLHttpRequest();
    } else if(window.ActiveXObject){
      ajaxobject = new ActiveXObject("Microsoft.XMLHTTP");
    }else if(window.ActiveXObject){
     ajaxobject = new ActiveXObject("Msxml2.XMLHTTP");
    }




   ajaxobject.open("POST", "SaveImageServlet?image="+uri, true);
   ajaxobject.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   ajaxobject.onreadystatechange = function(){

   if(ajaxobject.readyState==4){
    alert(ajaxobject.status);
     if(ajaxobject.status==200){
    alert(ajaxobject.responseText);     
    }}
  };
  ajaxobject.send(null);      

 }

---

从您的代码来看，问题似乎是您在querystring中传递数据，而不是使用请求体（因为您设置了POST动词，所以应该这样做）

您的uri应该如下所示：

SaveImageServlet

$.ajax({
contentType: 'text/plain',
data: {
    "image": yourBase64string
},
dataType: 'application/json', // or whatever return dataType you want
success: function(data){
    // callback in case of success
},
error: function(){
    // callback in case of error
},
type: 'POST',
url: '/SaveImageServlet'
});

Request.Form["image"]

没有问号和参数。该参数应在请求正文中设置。使用jquery ajax，您的请求如下所示：

SaveImageServlet

$.ajax({
contentType: 'text/plain',
data: {
    "image": yourBase64string
},
dataType: 'application/json', // or whatever return dataType you want
success: function(data){
    // callback in case of success
},
error: function(){
    // callback in case of error
},
type: 'POST',
url: '/SaveImageServlet'
});

Request.Form["image"]

在服务器端，您应该从适当的位置读取数据。例如，如果您正在使用.Net，请这样阅读：

SaveImageServlet

$.ajax({
contentType: 'text/plain',
data: {
    "image": yourBase64string
},
dataType: 'application/json', // or whatever return dataType you want
success: function(data){
    // callback in case of success
},
error: function(){
    // callback in case of error
},
type: 'POST',
url: '/SaveImageServlet'
});

Request.Form["image"]

而不是：

Request.Querystring["image"]

---

这应该像预期的那样持续工作。

@Matteo，感谢您的帮助和努力。然而，AJAX问题从未得到解决。我找到了一种将base64图像数据发送到servlet的方法。只需将其附加到一个隐藏字段，并将其作为常规表单字段发送

谢谢，但是你能让我知道它是如何在Javascript中完成的（没有jquery）谢谢，但是你能让我知道它是如何在Javascript中完成的（没有jquery）。在我上面的代码中，我删除了附加的参数，但是我的servlet抛出了一个nUllpointer异常。我真的不记得如何在普通JS中这样做了，因为我已经很久没有这样做了。请记住，如果使用纯JS，则必须自己处理跨浏览器。IE使用与其他浏览器不同的类来进行ajax调用。我已经使用了你的代码，但我无法传输数据。图像参数在servlet中显示为null。我使用JAVA。数据类型重要吗？