jquery+ajaxform+springboot控件实现数据更新操作

作者:运维知识    发布时间:2019-12-11 14:08     浏览次数 :

[返回]

实现方法:用到了高山来客 的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, 不能让其刷新页面,而是要不断地通过ajax获取progress.aspx返回的进度信息,所以用到了jquery.form的ajaxform提交。ajaxform提交后如果执行提交后的事件,比如在数据库里插入记录,还在调试中。

使用springboot架构在如下图所示的界面布局中,实现数据的保存或者更新,务必需要提交到后台,如何进行成功或失败的提示呢?如果使用传统的springmvc的模式,势必要传一个页面给前端,这个页面仅仅是提示操作是否成功了!提示之后还得更新一下数据,就好比我们浏览某些网站的时候给出的一些提示操作成功,5秒后返回。比较傻,客户体验也比较差劲。

1、用到了jquery 的 progressbar 、form、MultFile及相关组件

图片 1image.png

            </pre><p><strong>2.uploadfile.js代码如下:</strong></p><pre >$ { var info = '<div style="display:none" >'; info += '<p>正在上传: <span ></span></p>'; info += '<p>上传速度: <span ></span> </p>'; info += '<p>状态: <span ></span></p>'; info += '<p>预计剩余时间: <span ></span></p>'; info += '<p>上传文件大小: <span ></span></p>'; info += '<p>已上传大小: <span ></span></p>'; info += '<p><div ></div></p>'; info += '</div><div > '; $; //进度条 $.progressbar(); //上传 $.MultiFile.click { alert; //提交 $.click { $.ajaxSubmit( { dataType: 'text', beforeSubmit: function { startProgress(); }, async:false, success: function { //$.text; //stopProgress { /* $; $.dialog( { modal: true, overlay: { opacity: 0.5, background: "black" } }); */ } }, error:function; } }); }); }); function getProgress(){ $.ajax({ type: "post", dataType:"json", url: "uploadProgress.aspx", data: "UploadID=" + $, success: function{ $.progressbar("progress", data.percent); $.html; $.html; $.html; $.html; $.html; $.html; if{ alert; } if { setTimeout", 1000); } if { return; } }, error:function; } }); } function startProgress.show(); setTimeout; } function stopProgress.hide(); } </pre><p><strong>3:progress.aspx代码如下: </strong></p><pre >protected void Page_Load(object sender, EventArgs e) { try { string s = "{"; UploadContext upload = UploadContextFactory.GetUploadContext; //初始化 if (upload.Status == uploadStatus.Initializing) { s += responeJSON; } if (upload.Status == uploadStatus.Uploading) { s += responeJSON; } if (upload.Status == uploadStatus.Complete) { s += responeJSON; } if (upload.Status == uploadStatus.HasError) { s += responeJSON; } s += "}"; Response.Write; } catch  { //throw err; Response.Write("{'info':'" + err.Message.Replace + "','succ':-1}"); } } private string responeJSON(UploadContext upload, string succ,string errmsg) { string s = ""; s += "'info':'" + upload.FormatStatus + "'" ; s += ",'percent':'" + Convert.ToInt32((upload.Readedlength * 100.0 / upload.TotalLength)).ToString() + "'"; s += ",'current':'" + (upload.Readedlength/1024).ToString() + "KB'"; s += ",'total':'" + (upload.TotalLength/1024).ToString() + "KB'"; s += ",'rate':'" + upload.FormatRatio + "'"; s += ",'filename':'" + upload.CurrentFile + "'"; s += ",'cancel_upload':" + 0 ; s += ",'lefttime':'" + upload.LeftTime + "'"; s += ",'succ':" + succ; s += ",'errmsg':'" + errmsg +"'"; return s; } </pre><p><strong>4.ajaxForm执行后</strong>,能够正常运行,那上传文件后,我如何执行其它操作,研究完了再发</p><p>以上所述是小编给大家介绍的Jquery和BigFileUpload实现大文件上传及进度条显示,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!</p>

使用ajax能否解决上述的问题呢?答案是肯定的,点击保存之后,一个ajax请求到后台,使用ResponseBody标签,限制返回的仅仅是数据。然后根据返回的数据给出相应的提示信息就可以了。传统的ajax请求数据,需要将form里面的数据重组,全部放到我们的请求体里面。如下代码所示:

$.ajax({ type: 'POST', url: url, data: data, success: success, dataType: dataType});

如果,我提交的form数据比较多的话,那么data就相对比较庞大了。代码比较臃肿。同时,form表单也丧失了其存在的意义了。有没有一种比较优雅的方式实现form表单的ajax提交呢?当然。jquery的ajaxform插件是一个比较不错的选择。

  1. 第一步。当然是引入我们强大的插件了。
 <script src="static/assets/js/jquery.form.min.js"></script>

该js下载,我提供一下github的地址吧:

  1. 第二步。在我们想要发送请求的地方进行ajax+form请求的发送。
 function insert() { var options = { // target: '#output1', // 用服务器返回的数据 更新 id为output1的内容. // beforeSubmit: showRequest, // 提交前 success: showResponse, // 提交后 //另外的一些属性: //url: url // 默认是form的action,如果写的话,会覆盖from的action. //type: type // 默认是form的method,如果写的话,会覆盖from的method.('get' or 'post'). //dataType: null // 'xml', 'script', or 'json' (接受服务端返回的类型.) //clearForm: true // 成功提交后,清除所有的表单元素的值. resetForm: false // 成功提交后,重置所有的表单元素的值. //由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间, //当请求大于3秒后,跳出请求. //timeout: 3000 }; //'ajaxForm' 方式的表单 . $('#baseForm').ajaxSubmit; }
  1. 处理一下提交后返回的方法
 // 提交后 function showResponse(responseText, statusText) { alert('状态: ' + statusText + 'n 返回的内容是: n' + responseText); }
下一篇:没有了