[转载]基于SpringMVC与jquery的ajax提交表单的若干情况详解 - lx_hust - 博客园

baacloud免费翻墙vpn注册使用

来源: [转载]基于SpringMVC与jquery的ajax提交表单的若干情况详解 – lx_hust – 博客园

在日常的业务中,我们往往使用的是ajax提交页面数据,而不用form的action来提交整个表单。现在我来分享一下我在日常工作中遇到的一些问题。

一、$.post、$.get、$.ajax三者的区别:

顾名思义,$.post和$.get分别是采用post方式和get方式向服务器发送请求。两者的不同是,get请求的参数是在url直接以 url?name1=value1&name2=value2的形式拼接而成,而post请求的参数会以请求正文的形式传送到服务器,这个学习过 javaweb知识的应该都知道,在此也不赘述。

在这里主要想讲的是关于同异步发送请求的。$.post和$.get默认是采用异步的形式向服务器发送请求,但我们的需求中很多情况需要得到服务器的返回值来判断下一步的操作,这个时候就需要用到$.ajax了。

<div class="container">
<div class="line number1 index0 alt2"><code class="javascript keyword">var</code> <code class="javascript plain">flag=</code><code class="javascript keyword">false</code><code class="javascript plain">;</code></div>
<div class="line number2 index1 alt1"><code class="javascript plain">$.ajax({</code></div>
<div class="line number3 index2 alt2"><code class="javascript spaces">             </code><code class="javascript plain">type: </code><code class="javascript string">"get"</code><code class="javascript plain">,</code></div>
<div class="line number4 index3 alt1"><code class="javascript spaces">             </code><code class="javascript plain">url: </code><code class="javascript string">"xxxxxx"</code><code class="javascript plain">,</code></div>
<div class="line number5 index4 alt2"><code class="javascript spaces">             </code><code class="javascript plain">async:</code><code class="javascript keyword">false</code><code class="javascript plain">,</code></div>
<div class="line number6 index5 alt1"><code class="javascript spaces">             </code><code class="javascript plain">data: {username:name, password:pwd},</code></div>
<div class="line number7 index6 alt2"><code class="javascript spaces">             </code><code class="javascript plain">dataType: </code><code class="javascript string">"json"</code><code class="javascript plain">,</code></div>
<div class="line number8 index7 alt1"><code class="javascript spaces">             </code><code class="javascript plain">success: </code><code class="javascript keyword">function</code><code class="javascript plain">(data){</code></div>
<div class="line number9 index8 alt2"><code class="javascript spaces">                                   </code><code class="javascript keyword">if</code><code class="javascript plain">(data&gt;0){</code></div>
<div class="line number10 index9 alt1"><code class="javascript spaces">                                        </code><code class="javascript plain">flag=</code><code class="javascript keyword">true</code><code class="javascript plain">;</code></div>
<div class="line number11 index10 alt2"><code class="javascript spaces">                                   </code><code class="javascript plain">}</code></div>
<div class="line number12 index11 alt1"><code class="javascript spaces">                      </code><code class="javascript plain">}</code></div>
<div class="line number13 index12 alt2"><code class="javascript spaces">         </code><code class="javascript plain">});</code></div>
<div class="line number13 index12 alt2">

  如以上代码,type来设置请求方式,async则设置的是同步或者异步,默认为true异步的,此时设置为false。如果用通常的$.post和$.get的话,flag的值是不会随着返回值data的值发生改变的。

二、文件上传

ajax上传文件一直都是一个比较头疼的问题,在这里我用的是JQuery的一个扩展框架,JQuery.form.js,此包提供了一 个$ajaxSubmit方法,很好的解决了springmvc下文件上传的问题,当然,form表单的method为post,type为 multipart/form-data,示例代码如下:


$(#id).ajaxSubmit({
type: 'post',
url: 'xxxxxx',
data: {
uername: name,
content: content
},
success: function(data) {
//回调函数
}
});

此时,表单数据和文件数据会保存在request中传入服务器。后台获取代码如下:

<pre>MutlipartHttpServletRequest  multipart =(MutlipartHttpServletRequest )request;
//把request转为上传文件专用的request
Map&lt;String,String[]&gt; dataMap = request.getParameterMap();
//获取普通表单数的&lt;name,value&gt;键值对
Map&lt;String,Multipart&gt; fileMap = request.getFileMap();
//获取上传文件的键值对,当未上传文件时,这个键值对会以普通数据存在于dataMap中而不是fieMap中

暂时这么多把,想起来了再加。

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏