注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天朝布衣田中码农参上

苦逼码农的点点滴滴,请多多指教!

 
 
 

日志

 
 
 
 

利用onchange事件优化表单提交参数  

2016-07-24 07:19:07|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
传统的表单数据提交,大约有两种方式:一种是GET,一种是POST。GET方式我们这里并不涉及,仅就表单POST方式提交参数来提下优化思路。onchange 事件会在域的内容改变时发生,支持该事件的 HTML 标签有:<input type="text">, <select>, <textarea>。看明白了没有,思路就是利用这个事件,在用户输入时,如果表单某元素发生变化时,才设置下要提交的参数。
相关的参考代码如下:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form method="post" onsubmit="alert(JSON.stringify(arrstr));return false;">
输入框:<input type="text" name="site1" onchange="arrstr[this.name]=this.value;" />
下拉框:<select name="site2" onchange="arrstr[this.name]=this.value;">
<option value="593668.com">593668.com</option>
<option value="237h.com">237h.com</option>
<option value="9zfx.com">9zfx.com</option>
</select>
文本框:<textarea name="site3" onchange="arrstr[this.name]=this.value;"></textarea>
<input type="submit"/>
</form>
<script language="javascript">
var arrstr ={}; //要提交的参数数组
</script>
</body>
</html>

如只修改其中一个,那么结果如下:
利用onchange事件优化表单提交参数 - sinsunson - 天朝布衣田中码农参上
 如果一个不改,那么结果就是:
利用onchange事件优化表单提交参数 - sinsunson - 天朝布衣田中码农参上
这样的话,我们就可以在修改或增加时,将那些没有变化值直接跳过不用表单提交。比如改用如下办法:

<form id="truesubmit" method="post">
<!--这里利用一个隐藏按钮来将转换后的json字符串提交到后台-->

<input type="hidden" name="poststr" id="poststr" value="" />
</form>
<form method="post" onsubmit="document.getElementById('poststr').value=JSON.stringify(arrstr);document.getElementById('truesubmit').submit();return false;">
输入框:<input type="text" name="site1" onchange="arrstr[this.name]=this.value;" /><br />
下拉框:<select name="site2" onchange="arrstr[this.name]=this.value;">
<option value="">无</option>
<option value="593668.com">593668.com</option>
<option value="237h.com">237h.com</option>
<option value="9zfx.com">9zfx.com</option>
</select><br />
文本框:<textarea name="site3" onchange="arrstr[this.name]=this.value;"></textarea><br />
<input type="submit"/>
</form>
<script language="javascript">
var arrstr ={}; //要提交的参数数组
</script>

那么真正提交的数据就只有:
利用onchange事件优化表单提交参数 - sinsunson - 天朝布衣田中码农参上
 
 而传统的原来那种提交方式,则会那怕这个表单的值是空,或从没有变过,也一样会提交,造成流量浪费。
利用onchange事件优化表单提交参数 - sinsunson - 天朝布衣田中码农参上
也许在一两个页面的流量中,这样节省不了太多,如果是流量非常大,并发很高的网站,这么一点节省的流量就可以花费很大的作用,毕竟网络的开销能够节省一点是一点。
当然如果大家觉得这样改变提交模式不太好,那么还可以参考如下代码:

<form id="truesubmit" method="post">
</form>
<form method="post" onsubmit="document.getElementById('truesubmit').submit();return false;">
输入框:<input type="text" name="site1" onchange="createforminput(this.name,this.value);" /><br />
下拉框:<select name="site2" onchange="createforminput(this.name,this.value);">
<option value="">无</option>
<option value="593668.com">593668.com</option>
<option value="237h.com">237h.com</option>
<option value="9zfx.com">9zfx.com</option>
</select><br />
文本框:<textarea name="site3" onchange="createforminput(this.name,this.value);"></textarea><br />
<input type="submit"/>
</form>
<script language="javascript">
var postform=document.getElementById('truesubmit');
//隐藏表单元素创建函数
function createforminput(name,value){
if(document.getElementById(name)!=null){
document.getElementById(name).value=value;//元素已经存在,就直接改变值
}else{
var inputele=document.createElement("input");
inputele.type="hidden";
inputele.name=name;
inputele.id=name;
inputele.value=value;
postform.appendChild(inputele);//元素不存在,就直接创建
}
}
</script>

这样的话,就可以完全按照传统方式来提交参数,而不用后台来解码json了,可能也更符合大家的习惯吧。还有checkbox和radio,除了onchange事件之外,可能还需要监控下onclick事件。至于更进一步的扩展,如元素先是改成非空值,但最终值为“”,就也不提交的话,那么可能还需要大家进行更多的扩充。
  评论这张
 
阅读(1)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018