先描述下载项目中遇到的问题,在使用jquery form异步上传文件的时候,即使在struts返回视图配置文件中写上type="json",页面中接收到的内容也不会是真正的json字符串,我遇到的是在json串外侧还包了一层html标签<pre/>以至于js回调函数不能正确的解析struts端返回的json数据。
经过各种搜,有前辈也遇到过类似的情况,就此记录下来,以便自己今后查找。
注意以下代码中的红色部分,是关键。
在struts返回视图配置中加入<param name="contentType">text/html</param>即可,还有在异步上传js脚本时dataType: 'json'一定不能省略。
jsp页面首先引入:
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
js如下:
function addDevApp(){
if(checkForm()){
$("#addDevAppForm").attr("action",basePath+"/devAppAction!addDevApp")
function fn1(){
$.blockUI({
message: '<img src="../images/loading.gif" align="absmiddle" style="margin-right:20px">'+'<span id="load_span">正提交至云编译平台,可能需要几分钟,请稍后…</span>',
css: { width: '275px' }
});
}
function fn2(data){
$.unblockUI();
var msg = data.errMsg;
console.info(data);
if(msg == null){
alert("应用已提交至云编译平台!","提交云编译",function(){
window.location.href=basePath+"devAppAction!fetchDevAppListWithPage";
});
}else{
alert(msg);
}
}
var options = {
dataType: 'json',
beforeSubmit: fn1,
success: fn2
};
$("#addDevAppForm").ajaxSubmit(options);
}
}
在struts端xml中配置返回视图如下:
<result name="addDevAppSuccess" type="json">
<param name="contentType">text/html</param>
<param name="includeProperties">
errMsg
</param>
</result>
分享到:
相关推荐
在Web开发中,异步表单提交是一种常见需求,它能提供更好的用户体验,因为用户无需等待页面刷新即可完成数据的提交。jQuery.form插件正是为了满足这种需求而设计的,它扩展了jQuery库,使表单异步提交变得更加简单、...
表单异步上传,表单中可以支持文件和数据异步上传,
这是jQuery Form Plugin的一个核心文件,它扩展了jQuery,使得我们可以方便地进行异步表单提交。例如,我们可以使用以下代码来实现: ```javascript $("#myForm").submit(function(event) { event.preventDefault...
jQuery Form插件极大地简化了异步表单提交的过程,使开发者能够专注于业务逻辑和用户体验。结合SSH框架,可以构建出高效、互动性强的Web应用。在实际项目中,根据需求灵活运用这些工具和技巧,能有效提升网站性能和...
文件上传通常有两种方式:传统的表单提交(Form)和异步(Ajax)方式。在"form.php"中,文件是通过HTML的`<form>`元素,配合`enctype="multipart/form-data"`属性来实现上传的。用户选择文件后,点击提交按钮,...
3. **参数携带**:除了上传文件外,该插件还可以方便地添加额外的参数,这些参数会与文件一起发送到服务器,增强了数据交互的灵活性。 4. **进度反馈**:通过监听上传进度,可以显示上传进度条,让用户了解上传状态...
通过以上步骤,你就可以实现Struts2和jQuery form插件结合的异步文件上传功能。这个过程中,关键在于正确配置和交互,以及处理好前后端的数据交换。记得在实际项目中,还需要考虑文件大小限制、错误处理、安全性(如...
jQuery Form插件是jQuery库的一个扩展,它使得表单提交变得更加灵活和易于控制,特别是在处理文件上传时。在这个例子中,我们将探讨如何在Asp.Net MVC项目中实现这一功能。 首先,我们需要确保项目已经引用了必要的...
在jQuery-form中,你可以轻松实现异步(Ajax)提交表单,避免页面刷新,提升用户体验。它支持多种HTTP方法,包括POST和GET,以及XMLHttpRequest Level 2的PUT、DELETE等。此外,它还兼容各种表单编码类型,如...
**五、异步上传文件** jQuery Form插件特别适用于处理文件上传。通过设置`dataType`为'iframe',可以实现跨域文件上传,并在`success`回调中处理返回结果。 **六、增强用户体验** 通过使用jQuery Form插件,可以...
jQuery Form插件,基于jQuery库,是用于处理HTML表单的增强工具,能够方便地实现异步提交、文件上传等功能,极大地简化了前端开发人员的工作。在这个主题中,我们将深入探讨jQuery Form的核心功能、使用方法以及常见...
异步上传在现代Web应用中很常见,允许用户在不刷新整个页面的情况下上传文件,提高用户体验。在SpringMVC中,可以使用AsyncController或者配合Spring WebFlux来实现异步处理。 描述中提到的“jQuery表单上传工具...
`jQuery.Form.js`是jQuery的一个插件,专门用于处理表单提交,尤其是文件上传。它支持异步文件上传、进度条显示等功能,并且兼容多种浏览器,包括IE6+。 ### 2. 文件上传流程 - **初始化表单**: 首先,需要在HTML...
### Java实现多文件异步上传知识点详解 在现代Web应用开发中,文件上传是一个非常常见的需求,尤其是在涉及图片、文档等多媒体数据的应用场景下。为了提高用户体验,异步上传技术得到了广泛的应用。本文将深入探讨...
总的来说,ajaxForm异步提交表单是实现高效、流畅的用户交互的有效方式,特别是当表单包含图片或其他大文件时。通过正确配置和使用,可以极大地提高网站的性能和用户体验。在实际开发中,还需要注意跨域、安全性和...
异步上传文件** 对于包含文件输入的表单,jQuery Form插件支持File API,允许进行异步文件上传。配合`iframe`或者`FormData`,可以实现跨域文件上传。 **7. 兼容性与最佳实践** 考虑到兼容性,确保你的项目支持...
在本项目"【springmvc+jquery.form.min.js+spring文件上传】"中,我们将探讨如何结合这两个技术实现异步文件上传。 首先,我们需要理解Spring MVC中的文件上传处理。Spring MVC提供了`@RequestParam("file") ...
`ajaxSubmit`是jQuery Form Plugin的一部分,它允许我们使用Ajax技术实现表单的异步提交,包括多文件上传。这种方式不仅可以提高用户体验,因为用户无需等待页面刷新,还能有效管理服务器资源,避免一次性处理大量...
// 如果所有验证都通过,尝试上传文件 if ($uploadOk == 1) { if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) { echo "The file ". htmlspecialchars( basename( $_FILES["fileTo...
- **异步表单提交**:jQuery.form.js的主要特性是支持AJAX方式的表单提交,避免了页面刷新,保持用户交互的连贯性。 - **文件上传**:除了常规的数据提交,该插件还特别支持文件的异步上传,这对于现代网页中的...