收集表单数据——获取打包的表单数据4

最新推荐文章于 2024-04-11 22:57:27 发布

dongsdh

最新推荐文章于 2024-04-11 22:57:27 发布

阅读量383

点赞数 1

分类专栏：表单处理

本文链接：https://blog.csdn.net/dongsdh/article/details/106928243

版权

表单处理专栏收录该内容

17 篇文章 1 订阅

订阅专栏

前言：form表单外部额外增加表单元素，最后一起打包数据，发送请求

实现原理，往自定义formdata的空对象中不断添加数据，以达到请求接口需要的参数

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style>
		.formbox{
			box-shadow: #DDD 1px 1px 4px;
    		margin: 20px;
		}
		form{
			display: inline-block;
			border: 1px solid red;
			margin-right: 50px;
		}
		.selbox{
			display: inline-block;
			vertical-align: top;
		}
		.sub{
			display: inline-block;
		    width: 166px;
		    height: 50px;
		    line-height: 50px;
		    text-align: center;
		    background: #ff9400;
		    color: #fff;
		    margin: 20px;
		}
	</style>
</head>
<body>
	<div class="formbox">
		<form id="div1">
			<h2>表单内容</h2>
			性别：<input type="text" name="sex" value="男"/><br />
			年龄：<input type="text" name="age" value="18"/><br />
			地址：<input type="text" name="where" value="四川"/><br />
			电话：<input type="text" name="phone" value="1588114..."/><br />
			政治面貌:<select name="politics">
						<option value="1">群众</option>
						<option value="2">团员</option>
						<option value="3">党员</option>
					</select>
		</form>
		
		<div class="selbox">
			<b>城市:</b>
			<select name="city">
				<option value="成都">成都</option>
				<option value="重庆">重庆</option>
				<option value="西藏">西藏</option>
			</select>
			<br />
			<b>口味:</b>
			<select name="choose">
				<option value="活泼">活泼</option>
				<option value="火辣">火辣</option>
				<option value="闷骚">闷骚</option>
			</select>
		</div>
		<br />
		<span class="sub jssub">提交</span>
	</div>
	<script src="jquery.min.js"></script>
	<script>
		$.fn.extend({
		    kuozhan:function(){
		    	var data={};
				$(this).serializeArray().map(function(x){data[x.name]=x.value});
				return data;
		    }
		});
		var formdata = {};
		
		$("body").on("click",".jssub",function(){
			var gdata = $('#div1').kuozhan(); 
			for(k in gdata){
				formdata[k] = gdata[k];
			}
			ajax();
		})
		$("select[name='city']").change(function(){
			formdata.city=$(this).val();
			ajax();
		});
		$("select[name='choose']").change(function(){
			formdata.choose=$(this).val();
			ajax();
		});
		
		
		function ajax(){
			console.log(formdata);
		}
	</script>
</body>
</html>