开发者社区> 达摩院法师> 正文

js模拟form提交的一些问题

简介: 当在页面中需要进行post提交时,一般的做法是将控件放入form标签中,加入一个submit按钮进行post方式的提交。 遇到的问题 页面中有两个Tab进行切换,一个tab中需要获取用户输入的值进行post提交到search页面进行搜索操作,另一个tab中是获取用户输入的值进行get方法提交到另一个页面进行查询操作,那么那个按钮就不能使用submit类型的按钮了(后来发现那样也可以实现相应的功能),那么想到的方法就是模拟一个form进行post提交。
+关注继续查看

当在页面中需要进行post提交时,一般的做法是将控件放入form标签中,加入一个submit按钮进行post方式的提交。

遇到的问题

页面中有两个Tab进行切换,一个tab中需要获取用户输入的值进行post提交到search页面进行搜索操作,另一个tab中是获取用户输入的值进行get方法提交到另一个页面进行查询操作,那么那个按钮就不能使用submit类型的按钮了(后来发现那样也可以实现相应的功能),那么想到的方法就是模拟一个form进行post提交。

解决的方法

在页面中放入下面的模拟form

<form id="formSearch" method="post" action="/search.aspx">
    
<input type="hidden" id="hiddenWord" name="word" value="" />
</form>

在第一个tab对应的按钮事件中添加如下的js代码

$("#hiddenWord").val($("#word").val());
$("#formSearch").submit();

id为word的控件为用户输入条件的input控件

这样就实现了js的模拟post提交,实际上这样还解决了aspx页面的form中嵌套from标签的问题

编码的问题

当前的页面编码为UTF-8的编码,而search.aspx的编码为GB2312,所以post过去的数据出现了乱码,当然也可以使用js的encodeURIComponent进行编码

实际上在aspx页面的头部page注册时有这样一个属性:ResponseEncoding

加入此属性后aspx页面的头部应该像下面这个样子

<%@ Page Language="C#" AutoEventWireup="true" EnableViewState="false" ResponseEncoding="GB2312" %>

这样就解决了页面编码不一致的问题。

另一个小技巧

在submit按钮post前可以进行自定义函数的检查,即可以阻止掉post的提交过程

在submit的时候执行一些自定义的操作,需要先用preventDefault阻止提交

$("#id_form").submit(function(e) { e.preventDefault(); doSomething(); e.target.submit();})

click的时候就不需要,直接操作就可以

$("#id_save").click(function(e) { doSomething(); })


作者:Parry
出处:http://www.cnblogs.com/parry/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
C# winform调用WebBrowser经典怪问题总结
原文:C# winform调用WebBrowser经典怪问题总结 最近一直研究网页数据采集,单单采集数据,其实HtmlAgilityPack就足够了。 对HtmlAgilityPack感兴趣的可以到这里看看:C#采集代理服务器ip并设置IE代理--HtmlAgilityPack实战代码 但是有个问题:要是想要模拟人工输入数据,进行表单提交HtmlAgilityPack就办不了,Skybound.Gecko(firfox的.net开源代码) 也办不了这个事情。
1850 0
springMVC怎么改变form的提交方式为put或者delete
想着练习一下创建restful风格的网站呢,结果发现在jsp页面上并不能灵活使用put和delete提交方式.下面我的解决办法 一. form 只支持post和get两种提交方式,只支持get提交方式 二.
1178 0
表单提交(Basic Form Submit)
In this small tutorial, we'll try to build an Ext form that will submit in the tradional way, like all regular html forms Introduction As a pro...
647 0
Winform label文本颜色修改问题
    下面两个方法按理说都是可以修改Winform的label文本颜色的。    但是方法二有时候的无效的,这种情况必须使用方法一。方法一:   this.label1.ForeColor = System.
1417 0
自己存档:ajax 动态提交form
$.ajax({                    cache: true,                    type: "POST",                    url: "/postcomment",                    data: $('#pinglunform').
538 0
CHSNS#BUG提交及问题解答
CHSNS#如果有BUG请提交到这里,我会尽量在下一个发布版本中解决 如果有 问题请留下您的邮箱,我会尽快回复
590 0
83
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载