jquery表单插件，没有错误处理 [英] jquery form plugin, no error handling
问题描述
有人可以告诉我如何处理这个插件的错误（400，500等）？
$（＃uploadloadingImg ）。隐藏（）;
$ b $ var options = {//定义ajax选项
类型：post，
target：#responsePanel，
beforeSend：function（）{
$（＃uploadloadingImg）。show（）;
}，
complete：function（xhr，textStatus）{
$（＃uploadloadingImg）。hide（）;
}，
成功：function（response，statusString，xhr，$ form）{
//我知道该怎么做，因为这个选项正常工作
}，
error：function（response，status，err）{
//这个选项没有捕获下面的任何错误，
//所有的东西总是'OK'200也就是b $ b if（ response.status == 400）{
console.log（Sorry，this is bad request！）;
if（response.status == 601）{
sessionTimedOut（）;
$（＃polygonUploadForm）。submit（function（）{
$（this）.ajaxSubmit（options）; // Using jquery.form插件
返回false;
}）;
jQuery Form Plugin 处理错误和 文档是正确的，说明它可以使用$ .ajax选项。然而，插件将运行在两种模式 - 正常和文件上传。您遇到的问题是因为您正在执行文件上载。 （你不这么说，但是你有#uploadingImg和#polygonUploadForm和递归推理，你有这个问题。）
$ b $ p
，但是你不能用AJAX上传文件。这种解决方法是使用iframe。表单提交POSTs一个正常的HTTP请求，并在iframe中加载服务器响应。该插件抓住了回应，瞧。 因为这是正常的HTTP请求，所以$ .ajax的规则和行为不适用（因为它没有被使用）。 Form插件可以做的唯一事情就是把它作为一个成功的东西来处理。在代码方面，文件上传不会触发分配给ajaxForm（）或ajaxSubmit（）的错误属性。如果你真的想证明这不是一个AJAX请求，附加一个ajaxComplete（）处理程序的形式（即完全独立于表格插件的方法）。它也不会被触发。或者看一下Firebug的Net-> XHR面板。
这就是 - 上传不是AJAX请求。您可以做的最好的工作是在ajaxForm（）/ ajaxSubmit（）的成功或完整回调中工作。您被限制而无法访问实际的HTTP响应代码，但您可以检查响应。如果响应是空的或不是你所期望的，你可以通过调用 xhr.abort（）来触发'错误'回调。而不是做如果（好回应）{耶！}其他{哦不！}，调用abort（）并触发错误，使代码更干净，更容易理解的恕我直言。下面是一个代码示例：
$ $ $ $ $ $ $ $＃uploadForm。ajaxForm（{
success：function（response， （$ response.length）;
console.log console.log（bad or empty response）;
return xhr.abort（）;
}
console.log（All good。Do stuff）;
} ，
error：function（xhr，textStatus，errorThrown）{
console.log（in ajaxForm error）;
}，
complete：function（xhr，textStatus）{
console.log（in ajaxForm complete）;
}
}）;
一个错误的回应将会在控制台日志中打印出来：
[jquery.form] state = uninitialized
NetworkError：404 NOT FOUND - http：// server / fileupload /
[jquery。形式]状态=加载
[jquery.form] isXml = false
在ajaxForm成功
坏或空回应
[jquery.form]中止上传...中止
在ajaxForm错误
在ajaxForm完成
在ajaxForm完成
不知道为什么完成回调运行两次 - 任何人？
最后一件事，如果你问为什么jQuery或者这个线程表单插件不能只读取iframe的HTTP头。
It seems that there are no error handling facility in the Jquery.Form plugin, which is very frustrating. Even though the documentation says we can use the $.ajax options, I still cannot make use of the 'error' option when the server returns an error, especially the 500 and 400 series. Is it that this plugin cannot handle any error at all from the server or is it a bug, etc? Can someone please tell me how I can handle errors (400, 500, etc) with this plugin? I need your help... All I want is a simple error handling... Thank you.
$("#uploadingImg").hide();
var options = {//Define ajax options
type: "post",
target: "#responsePanel",
beforeSend: function(){
$("#uploadingImg").show();
},
complete: function(xhr, textStatus){
$("#uploadingImg").hide();
},
success: function(response, statusString, xhr, $form){
// I know what to do here since this option works fine
},
error: function(response, status, err){
// This option doesn't catch any of the error below,
// everything is always 'OK' a.k.a 200
if(response.status == 400){
console.log("Sorry, this is bad request!");
}
if(response.status == 601){
sessionTimedOut();
}
}
}
$("#polygonUploadForm").submit(function(){
$(this).ajaxSubmit(options); // Using the jquery.form plugin
return false;
});
The jQuery Form Plugin does handle errors and the documentation is correct in stating it can use the $.ajax options. However there are two modes the plugin will run in - normal and file upload. The problem you are having is because you are performing a file upload. (You don't say this but you have "#uploadingImg" and "#polygonUploadForm" and, recursive reasoning, you are having this problem.)
This is commonly stated, but you can't upload a file with AJAX. This workaround is to use an iframe. Form submit POSTs a normal HTTP request and loads the server response in the iframe. The plugin grabs the response and voila. Because this happens as a normal HTTP request, the rules and behaviors of $.ajax don't apply (because it isn't being used). The only thing Form plugin can do is treat whatever it gets as a success. In code terms, file uploading will never trigger the 'error' attribute assigned to ajaxForm() or ajaxSubmit(). If you really want to prove this isn't an AJAX request, attach an ajaxComplete() handler to the form (i.e. completely independent of the Form plugin's methods). It won't get triggered either. Or look at Firebug's Net->XHR panel.
So that's that - the upload is not an AJAX request. The best you can do is work within the 'success' or 'complete' callbacks of ajaxForm()/ajaxSubmit(). You are limited without access to the actual HTTP response code, but you can examine the response. If the response is empty or not what you expect, you can actually trigger the 'error' callback by calling xhr.abort(). Instead of doing "if(good response) {yay!} else {oh no!}", calling abort() and triggering 'error' makes the code a little cleaner and more understandable IMHO. Here's a code example:
$("#uploadForm").ajaxForm({
success: function(response, textStatus, xhr, form) {
console.log("in ajaxForm success");
if (!response.length || response != 'good') {
console.log("bad or empty response");
return xhr.abort();
}
console.log("All good. Do stuff");
},
error: function(xhr, textStatus, errorThrown) {
console.log("in ajaxForm error");
},
complete: function(xhr, textStatus) {
console.log("in ajaxForm complete");
}
});
A bad will response will print this in the console log:
[jquery.form] state = uninitialized
"NetworkError: 404 NOT FOUND - http://server/fileupload/"
[jquery.form] state = loading
[jquery.form] isXml=false
in ajaxForm success
bad or empty response
[jquery.form] aborting upload... aborted
in ajaxForm error
in ajaxForm complete
in ajaxForm complete
I don't know why the 'complete' callback is run twice - anyone? One final thing, read this thread if you are asking why jQuery or the Form plugin can't just read the HTTP headers of the iframe.
这篇关于jquery表单插件，没有错误处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
