form表单提交以及用Jquery实现ajax提交form表单

在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交,每一个input标签都需要有一个name属性,才能进行提交。

button的type 属性,IE的默认是 “button”,非IE默认是 “submit”。如果想不提交需要指定type为”button”。

<form>
    <button type="button">button</button><!--不提交form-->
    <button type="submit">button</button><!--提交form-->
    <button>button</button><!--非IE提交form,IE不提交form-->
</form>


1、input[type=submit]


<input type="submit" value="提交">

input[type]默认值为text

设置type=submit后,输入控件会变成一个按钮,显示的文字为其value值。提交后会使用GET方式进行页面跳转


inputtype属性还可以是button,这时它只是一个按钮,不会引发表单提交。


2.button[type=submit]

button是一个按钮,type的默认属性是submit,所以点击会提交表单

建议用button作为交互用的按钮,来提交表单。同时请注意设置type=submit来兼容IE。


3、表单验证

onSubmit是表单上(也只能是表单)用的,提交表单前会触发


onClick是按钮等控件上用的,用来触发点击事件。

在提交表单前,一般都会进行数据验证,可以选择在submit按钮上的onclick中验证,也可以在onsubmit中验证。

但是onclick比onsubmit更早的被触发。

提交过程:


1、用户点击按钮 ---->

2、触发onclick事件  ----> 

3、onclick返回true或未处理onclick ----> 

4、触发onsubmit事件  ----> 

5、onsubmit未处理或返回true  ------> 

6、提交表单.

 onsubmit处理函数返回false,onclick函数返回false,都不会引起表单提交。


<form id="taskForm" name="taskForm" action="${ctx}/vbpm/task/modify" οnsubmit="return checkValidate(this.form);">

如果不加return,我们只执行了此函数,没有对其结果进行任何处理,会继续提交表单。校验通过,自动提交表单。


<input type="button" value="返回" onclick="taskForm.action='${ctx}/vbpm/task/list';clearLocalStorage();taskForm.submit();">

修改表单的action,也可以调用js方法进行表单验证,通过之后提交表单。


4、ajax提交form表单

采用ajax异步方式,通过js获取form中所有input、select等组件的值,将这些值组成Json格式,通过异步的方式与服务器端进行交互,
一般将表单数据传送给服务器端,服务器端处理数据并返回结果信息等

参考:http://www.cnblogs.com/klwyrn/p/5955152.html

$(function(){
	$("#taskForm").click(
	    $.ajax({
		type : 'post',
                url : '/workflow/model/save',
                dataType : 'json',
                data : {
                    "modelId" : id,
                },
                success : function(data) {
                	
                },
                error : function(){
                	
                }
           })
	);
})

5、<a href 超链接post提交form表单

超链接一般是get方式提交

<a href="${ctx}/modeler.html?modelId=${modelProcess.modelId}">设计流程</a>

用post方式提交form表单

<a href="javascript:document.searchForm.action='${ctx}/workflow/model/deploy/${modelProcess.modelId}';javascript:document.searchForm.submit();">部署</a>

根据action跳转到对应的请求,并将表单数据一并提交。spring mvc  controller可以通过HttpServletRequest request.getParameter("")获取表单数据



http://www.anyrt.com/blog/list/submit.html  写的不错,可以参考

  • 33
    点赞
  • 64
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现jqueryform表单提交下载文件,可以采用以下步骤: 1. 在前端页面中添加一个表单,用于提交下载文件的请求。 2. 使用jqueryform插件将表单序列化并发送到后台。 3. 后台接收到请求后,根据表单中的参数生成需要下载的文件,并将文件保存到服务器端。 4. 后台将生成的文件路径返回给前端。 5. 前端使用window.open()方法打开返回的文件路径即可实现文件下载。 以下是示例代码: 前端代码: ``` <form id="downloadForm" action="/downloadFile" method="post"> <input type="hidden" name="fileName" value="example.txt"> <input type="hidden" name="fileContent" value="This is an example file."> <input type="submit" value="Download"> </form> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script> <script> $(document).ready(function(){ $("#downloadForm").submit(function(e){ e.preventDefault(); $(this).ajaxSubmit({ success: function(data){ window.open(data); } }); }); }); </script> ``` 后台代码: ``` @RequestMapping(value = "/downloadFile", method = RequestMethod.POST) @ResponseBody public String downloadFile(@RequestParam("fileName") String fileName, @RequestParam("fileContent") String fileContent, HttpServletRequest request, HttpServletResponse response) throws Exception { // 生成文件并保存到服务器端 String filePath = "/path/to/file/" + fileName; File file = new File(filePath); FileWriter writer = new FileWriter(file); writer.write(fileContent); writer.flush(); writer.close(); // 返回文件路径 return filePath; } ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值