关于最近遇到的数据提交时遇到的问题(新人,若有误,请指正)

作为一个javaweb方面的程序员,肯定会遇到各种各样的前后台交互的问题。最近我就遇到了一个html的表单数据提交到服务器上报错的问题。

首先了解一下传参的几种方式,我知道的不多,就两种(欢迎补充)。一种是ajax提交,一种是from表单提交。

众所周知的ajax方式有get,post两种。具体的意思也很好理解,get的字面意思是获取,那么获取的前提是你要告诉后台你需要获取什么,这个告诉后台的过程就是前台数据向后台发送的过程。使用Get请求时,参数都存在URL中,所以send函数发送的参数为null,并且发送的数据肯定不会很多,当然所传参数的数据肯定也是暴露在url里面的,这种方式肯定存在安全隐患。使用post请求时,参数不会显示出来,发送的数据量较大,并且不需要注意缓存的问题。但是post请求必须设置Content-Type值为application/x-form-www-urlencoded。

具体的介绍可以参照http://www.cnblogs.com/oneword/archive/2011/06/06/2073533.html

在使用ajax的时候,经常会存在跨域的问题。在哪种情况下会出现跨域呢。

这篇文章介绍的非常清楚了。http://www.cnblogs.com/fanyx/p/5775939.html

关于解决ajax跨域的方法在这片文章里也有详细的描述,在此我就不一一赘述,

但是在我日前的遇到的问题这三种解决方案并未生效,具体的原因我也不清楚,后台是否不能接收ajax的跨域请求我也接触不了。所以最后我想了一个折中的办法。

当然我并不推荐大家用这种方法,但是如果实在没有办法的时候可以尝试。

我使用了form表单提交,这个办法我不是不推荐大家使用,只是存在一些问题。

在from表单的action里放入请求url,然后使用post提交数据。(切记加上enctype=application/x-www-form-urlencoded)。这些都没有问题,但是表单提交成功后会进行页面跳转。百度了很久发现了如下的几种方法。当然会有不成功的,不过我不认为他们提供的方法是错的,只能说不适合我的这个情况(或者我自己没弄对)。

方法一:

利用jquery的ajaxSubmit函数以及form的onsubmit函数完成,如下: 

<form id="saveReportForm" action="saveReport.htm" method="post" onsubmit="return saveReport();"> 
<input type="submit" value="保存报告"/> 
</form> 

form增加一个id用于在jquery中调用,增加一个onsubmit函数用于submit前自己提交表单 

       saveReport对应函数为 

function saveReport() { 
// jquery 表单提交 
$("#showDataForm").ajaxSubmit(function(message) { 
// 对于表单提交成功后处理,message为提交页面saveReport.htm的返回内容 
}); 
return false; // 必须返回false,否则表单会自己再做一次提交操作,并且页面跳转 

此方法在我的页面中并没有成功

方法二:将form表单里面的提交按钮的type=“submit”改为type=“button”,并且一定要给from表单添加id,onsubmit="return false;"

<form id="myForm" action="http://www.baidu.com" method="get" onsubmit="return false;">
    姓名:<input type="text" name="name" size="20"><br />
    <input type="button" onclick="formSubmit()" value="提交">
</form>

 然后在js里面添加:

   function formSubmit()
        {
             // return false; 可以在这里进行表单校验。
             document.getElementById("myForm").submit();
             //该方法提交表单的方式与用户单击 Submit 按钮一样,但是表单的 onsubmit 事件句柄不会被调用。
             //onsubmit="return false;"可以用于阻止enter键提交表单。
     //换成jquery方式,比如$("#myForm").submit()会调用onsubmit事件。
        }

此方法在我的页面中并没有成功

方法三: 最后我实在没办法想了一个折中的方法,使用from和ifrom

<form action="" id="" method="post" target="id_iframe"> 
<input type="text" id="input_text" name="input_text"/> 
<input type="submit" id="sobmit" name="submit" value="提交" /> 
</form> 

此时在添加iframe

<iframe id="id_iframe" name="id_iframe" style="display:none;"></iframe> 

这种方法的实现原理是form表单提交数据,之后将返回的页面跳转放入了iframe里面去,但是这个时候的iframe是display=none的,所以就可以实现form表单提交后的页面不刷新,不跳转了。

但是值得注意的是,这个iframe的放入位置是不固定的,可以随便放入,不过我在放入的时候发现了一个问题,就是我将iframe放入body以后,在iframe后面出现的所有页面元素全部不见了,不管是div还是纯文字,都没有显示,具体原因我目前还没有搞清楚,所以我不推荐大家用这种方法就是这个原因。当然也可能是我哪个地方没有布局好,导致出现这种情况,如果各位看官有更好的解决方案或者我哪儿有什么不对的地方,欢迎指出,我将不胜感激。

猜你喜欢

转载自blog.csdn.net/t_Login/article/details/71513991
今日推荐