<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

	<title>FormData收集表单信息</title>

	<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>

</head>

<body>

<form name="the" action="serve/serve.php" method='post'>

	<table>

		<tr>

			<td>用户名<input type="text" name="username"></td>

		</tr>

		<tr>

			<td>密码		<input type="password" name="pwd"></td>

		</tr>

		<tr>

			<td><input type="submit" value="登陆"></td>

		</tr>

	</table>

</form>

</body>

<script type="text/javascript">

$(document).ready(function(){

	$("form").submit( function () {

			//使用 FormData 对象收集表单数据

			var FormData = $("form[name=the]").serialize();				//批量获取了数据

			var FormData = $("form[name=the]").serializeArray();		//并且转换为Json格式数据

			console.log(FormData);

			/*

			*	选择传输的	FormData 数据

			*	进行 AJAX 数据验证

			*/

			alert(FormData)

			return false;		//设置为 false  这样表单提交就不会页面跳转

	});

})

</script>

</html>

FormData收集表单信息&并且转化为Json格式进行提交验证的更多相关文章

  1. js 表单内容使用ajax以json格式混合提交

    脚本代码 function submitForm(){    var post_data = $("#form1").getdict();    var data_dict = { ...

  2. 利用Shell脚本将MySQL表中的数据转化为json格式

    脚本如下: #!/bin/bash mysql -s -phello test >.log <<EOF desc t1; EOF lines="concat_ws(',', ...

  3. ajax+FormData+javascript实现无刷新表单信息提交

    ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息  ,实例化表单数据对象 同时收集fm的表单域信息. var f ...

  4. ajax无刷新方式收集表单并提交表单

    ajax无刷新方式收集表单有两种方式, 一个是使用html5的FormData.一个是传统的方式. 一,FormData,在主流的浏览器中可以用,IE不好用啊. 另外,FormData使用有两个条件, ...

  5. ThinkPHP中create()方法自动验证表单信息

    自动验证是ThinkPHP模型层提供的一种数据验证方法,可以在使用create创建数据对象的时候自动进行数据验证. 原理: create()方法收集表单($_POST)信息并返回,同时触发表单自动验证 ...

  6. Servlet——提交表单信息，Servlet之间的跳转

    HTML表单标签:<form></form> 属性: actoion:  提交到的地址,默认为当前页面 method:  表单提交方式 有get和post两种方式,默认为get ...

  7. 关于serialize() FormData serializeArray()表单序列化

    serialize()  FormData  serializeArray()都是序列化表单,实现表单的异步提交 但是serialize()和serializeArray()都是只能序列化表单中的数据 ...

  8. FormData 和表单元素(form)的区别

    Form 元素 <form>元素表示文档中的一个区域,此区域包含交互控件,用于向 Web 服务器提交信息(文件.字符).下面称之为表单元素或表单. 要向 Web 服务器提交信息,我们必须要 ...

  9. name属性作用+使用$.post()取代name属性在提交表单信息中的作用

    name的用途 1)主要是用于获取提交表单的某表单域信息, 作为可与服务器交互数据的HTML元素的服务器端的标示,比如input.select.textarea.框架元素(iframe.frame.  ...

  10. element 关闭弹窗时清空表单信息

    关闭弹窗时清空表单信息: // 弹框关闭时清空信息 closeDialog () { this.$nextTick(() => { this.$refs['createModelForm'].c ...

随机推荐

  1. Nexus系列---【使用docker搭建nexus3仓库】

    1.Docker搭建nexus3私服 如果机器配置比较低,建议指定初始内存大小,默认2G docker run -d \ --restart=always \ --name=nexus3 \ -p 6 ...

  2. VUE keepAlive缓存问题之动态使用exclude(会使用到VUEX)

    exclude是啥? 官方解释: 怎么用呢? 处理的问题是什么?(答:返回首页的时候清除B页面的缓存) 我遇到的问题是: 一开始状态:A(首页). B(列表).C(列表中的详情)三个页面,设置B页面的 ...

  3. 20193314白晨阳《Python程序设计》实验四 Python综合实践

    课程:<Python程序设计> 班级: 1933 姓名: 白晨阳 学号:20193314 实验教师:王志强老师 实验日期:2021年6月13日 必修/选修: 公选课 实验内容: Pytho ...

  4. 位运算与MOD快速幂详细知识点

    最近写的一些题目设计到了数论的取模 如下题 链接:https://ac.nowcoder.com/acm/contest/3003/G来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制: ...

  5. 图的基本操作 （c语言）

    图的基本操作:创建 删除 遍历 创建:邻接矩阵和邻接表 十字链表 下面代码是邻接矩阵的定义和邻接表的创建 遍历:深度优先遍历(一条路走到黑) 广度优先遍历(树的层次遍历) 具体代码: #include ...

  6. 关于Maven的使用

    Maven基础入门 一.maven是什么 Apache Maven,是一个项目管理及自动构建的工具,有Apache软件基金会所提供. Maven是用Java语言编写的,是一款可以跨平台的软件. Mav ...

  7. 12-XXE漏洞

    1.概述 <!--第一部分:XML声明--> <?xml version="1.0"?> <!--第二部分:文档类型定义DTD--> <! ...

  8. C/C++ 数据结构使用数组实现队列的基本操作

    //使用数组实现队列 #include <iostream> #include <Windows.h> using namespace std; #define MAXSIZE ...

  9. Jmeter之post上传文件（jmeter接口测试请求参数上传文件）

    一,上传excel等普通文件 接口测试时有接口文档的话,那就对着文档写,没api文档,就自己抓包看了. 接口文档 抓包查看 步骤一:接口请求切换至文件上传(Files Upload)栏 content ...

  10. Rancher 通过主机标签进行调度

    https://blog.csdn.net/qq12547345/article/details/121486709