jquery之获取form表单数据的两种方式,提交方式为post

form表单提交获取键值对对象的两种方式

html

    <form action="">
		<input type="text" name="name" value="freely"><br>
		<input type="text" name="age" value="20"><br>
		<input type="text" name="city" value="beijing"><br>
		<input type="text" name="job" value="fe"><br>
	</form>
	<button id="serialize">send</button>

js

$(document).ready(function() {
			$('#serialize').on('click', function() {
				// 方法一 serialize
				var str = $('form').serialize();
				getObj(str);
				// 得到序列化字符串
				// name=freely&age=20&city=beijing&job=fe
				// 方法二 serializeArray
				var arr = $('form').serializeArray();
				// 得到数组对象
				/*
					0: {name: "name", value: "freely"}
					1: {name: "age", value: "20"}
					2: {name: "city", value: "beijing"}
					3: {name: "job", value: "fe"}
				*/
				// 遍历数组得到 {name: 'freely', age: 20}数据格式
				// 使用jquery方法 $.each方法
				var tempObj = {};
				$.each(arr, function(i, obj) {
					tempObj[obj.name] = obj.value;
				});
				console.log(tempObj); // {name: "freely", age: "20", city: "beijing", job: "fe"}
			});
		});

		function getObj(str) {
			let arr = str.split('&');
			let obj = {};
			arr.map(function(item) {
				let tempArr = item.split('=');
				obj[tempArr[0]] = tempArr[1];
			});
			console.log(obj); // {name: "freely", age: "20", city: "beijing", job: "fe"}
		}

 

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值