jquery如何实现表单post方式提交
一、总结
一句话总结：即使js给form对象提供了submit()方法，那也不意为表单中可以不写提交按钮这个元素，即form表单依然需要五脏俱全才可以使用js的submit()方法进行提交。
二、js 模拟表单post方式提交
下面是用js动态创建form然后进行post提交的方式，参数url是表单提交的去向，参数params是给去向传递的参数（JSON结构），参数target设置何处打开链接文档（可选）： cop
- function postcall( url, params, target){
- var tempform = document.createElement("form");
- tempform.action = url;
- tempform.method = "post";
- tempform.style.display="none"
- if(target) {
- tempform.target = target;
- }
- for (var x in params) {
- var opt = document.createElement("input");
- opt.name = x;
- opt.value = params[x];
- tempform.appendChild(opt);
- }
- var opt = document.createElement("input");
- opt.type = "submit";
- tempform.appendChild(opt);
- document.body.appendChild(tempform);
- tempform.submit();
- document.body.removeChild(tempform);
- }
注意：即使js给form对象提供了submit()方法，那也不意为表单中可以不写提交按钮这个元素，即form表单依然需要五脏俱全才可以使用js的submit()方法进行提交。
调用方式：
- postcall( 'newAnime', {page_num:1,page_size:10});
- 或 添加链接打开方式：
- postcall( 'newAnime', {page_num:1,page_size:10}, '_blank');
三、使用ajax方法实现form表单的提交
写在前面的话
在使用form表单的时候,一旦点击提交触发submit事件，一般会使得页面跳转，页面间的跳转等行为的控制权往往在后端，后端会控制页面的跳转及数据传递，但是在某些时候不希望页面跳转，或者说想要将控制权放在前端，通过js来操作页面的跳转或者数据变化。
一般这种异步的操作，我们都会想到ajax方式，因此在实现了功能后就整理了这篇文章，通过ajax方法实现form表单的提交并进行后续的异步操作。
常见的form表单提交方式
login test用户名：
密 码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="login test">
</head>
<body>
<div id="form-div">
<form id="form1" action="/users/login" method="post">
<p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
<p>密 码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
<p><input type="submit" value="登录"> <input type="reset" value="重置"></p>
</form>
</div>
</body>
</html>
点击登录按钮后，即触发form表单的提交事件，数据传输至后端，由后端控制页面跳转和数据。
ajax实现form提交方式
修改完成后代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="ajax方式">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function login() {
$.ajax({
//几个参数需要注意一下
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: "/users/login" ,//url
data: $('#form1').serialize(),
success: function (result) {
console.log(result);//打印服务端返回的数据(调试用)
if (result.resultCode == 200) {
alert("SUCCESS");
}
;
},
error : function() {
alert("异常！");
}
});
}
</script>
</head>
<body>
<div id="form-div">
<form id="form1" onsubmit="return false" action="##" method="post">
<p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
<p>密 码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
<p><input type="button" value="登录" onclick="login()"> <input type="reset" value="重置"></p>
</form>
</div>
</body>
</html>
login test
用户名：
密 码：
注意事项
- 在常用方式中，点击的登录按钮的type为"submit"类型；
- 在常用方式中，form的action不为空；
- ajax方式中需要注意的是$.ajax方法中的参数：dataType和data。
我平时很少写前端代码，级别也就是入门级别，能看懂能改而已，所以很多时候都是百度，像这次这个功能的实现也是借助了百度，但是，我百度到的代码在$.ajax方法中设置的dataType参数值为"html"而不是"json"，导致我在一开始调试的时候一直报错，最终是改成了"json"才成功，因此在这里特别说明并提醒一下，别和我一样走错了路，还有就是向服务端传输的data值了，像上面代码一样，将form表单中的数据序列化传输即可。
jquery如何实现表单post方式提交的更多相关文章
-
js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得，放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式
js replace 全局替换 js 的replace 默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换. <scrip ...
-
jquery序列化from表单使用ajax提交返回json数据（使用struts2注解result type = json）
1.action类引入struts2的"json-default"拦截器栈 @ParentPackage("json-default") //示例 @Paren ...
-
使用jQuery重用form表单并异步提交到其它action
在做页面开发的时候,有时候要重用表单的数据,并异步请求提交到其它的链接中,这个时候就能够使用jquery去改动表单的action值(记得使用后改动回来).并调用submit方法,当然后台的链接acti ...
-
jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...
-
jquery.validate验证表单配合回调提交和h5.storage本地保存笔记
表单验证插件我使用:jquery.validate.js 支持中文提示,可扩展性强!教程地址 本地保存状态信息使用:h5提供的storage,浏览器支持5m的存储量,存储类型必须是string类型,并 ...
-
form表单Get方式提交时,action中带参数传递不了
<form action="getPostServlet/getPost.do?param4=param4" method="get"> <i ...
-
利用jquery来进行表单的多向提交
最近由于特别忙,每晚都是1到2点倒床便睡的那种,所以没有给自己要求写日记,等这阶段过完,还会重新开始. 今天来写一个前端的表单提交的方法. 有时往往以为在同一个表单中,不同的按钮,来表达的含义不同,需 ...
-
异步提交form的时候利用jQuery validate实现表单验证
异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则 // 电话号码验证 ...
-
jquery.validate和jquery.form配合实现验证表单后AJAX提交
基础代码其实很简单,之后一点一点扩充.最终代码写在最后. 表单: <form action="@Url.Action("AddColumns","Cont ...
随机推荐
-
POJ 1696	 Space Ant --枚举，模拟，贪心，几何
题意: 有很多点,从最右下角的点开始走起,初始方向水平向右,然后以后每步只能向左边走,问最多能走多少个点. 解法: 贪心的搞的话,肯定每次选左边的与它夹角最小的点,然后走过去. 然后就是相当于模拟地去 ...
-
使用AOP 实现多数据源 切换
多数据源的实现,这里就来个实例吧 1.在 spring 的配置文件中数据源信息 <?xml version="1.0" encoding="UTF-8"? ...
-
capture同focus
SetCapture函数功能:该函数在属于当前线程的指定窗口里设置鼠标捕获.一旦窗口捕获了鼠标,所有鼠标输入都针对该窗口,无论光标是否在窗口的边界内.同一时刻只能有一个窗口捕获鼠标.如果鼠标光标在另一 ...
-
PAT_1002 写出这个数
宝宝不开心了.自从回家开始百练就上不去POJ也上不去,今天突然HDU也上不去了,PAT25分的题目都快更新完了.我就按顺序往下面更新了.回学校之后题目质量能高出不少= =. 问题描述: 读入一个自然数 ...
-
MySQL server has gone away 解决方法
应用程序(比如PHP)长时间的执行批量的MYSQL语句.执行一个SQL,但SQL语句过大或者语句中含有BLOB或者longblob字段.比如,图片数据的处理.都容易引起MySQL server has ...
-
kbhit()的三个测试
#include <stdio.h> #include<conio.h> #include<stdlib.h> int main() { ; system(&quo ...
-
centos7.5 python修复
参考文章地址: 1.CentOS7修复python拯救yum: http://blog.51cto.com/welcomeweb/2132654 所有rpm包下载完成 wget http://mirr ...
-
linux下查看端口占用
1. lsof -i:端口号 用于查看某一端口的占用情况 需要注意的是,centos默认是没有安装lsof(list open files)的,需要手动安装 yum install lsof 各列代表 ...
-
ascii码值
ascii码值#0 空值 即null#8 退格键#13 回车键
-
牛客练习赛26 xor序列
xor序列 思路:线性基 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optimize(4) #include< ...