jQuery使用serialize(),serializeArray()方法取得表单数据+字符串和对象类型两种表单提交的方法

原始form表单值获取方式(手动):

$.ajax({
   type: "POST",
   url: "ajax.php",
   data: "Name=摘取天上星&position=IT技术",
   success: function(msg){alert(msg);},
   error: function(error){alert(error);}
 });

JQ serialize()方法取值:

$.ajax({
   type: "POST",
   url:"ajax.php",
   data:$(‘#formID‘).serialize(),// 要提交的表单
   success: function(msg) {alert(msg);},
   error: function(error){alert(error);}
});

serialize()序列化表单实例:

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
   $("#button").click(function(){
     alert($("#formID").serialize());
   });
});
</script>
<form id="formID">
    姓名 <input value="摘取天上星" name="Name" />
    职位 <input value="IT技术" name="position" />
        <input id="button" value="提交" type="button" />
</form>

将form中的值转换为键值对:

// 如:{Name:‘摘取天上星‘,position:‘IT技术‘}
// ps:注意将同名的放在一个数组里
function getFormJson(form) {
	var o = {};
	var a = $(form).serializeArray();
	$.each(a, function () {
		if (o[this.name] !== undefined) {
			if (!o[this.name].push) {
				o[this.name] = [o[this.name]];
			}
			o[this.name].push(this.value || ‘‘);
		} else {
			o[this.name] = this.value || ‘‘;
		}
	});
	return o;
}

键值对方式的AJAX调用:

//调试调用
$(function(){
	$("#button").click(function(){
		alert(getFormJson("#formID"));
	});
});
//Ajax提交
$.ajax({
   type: "POST",
   url:"ajax.php",
   data:getFormJson($("#formID")),//表单数据JSON格式的函数参数里填写表单的ID或要提交的表单
   dataType: ‘json‘,
   success: function(msg) {alert(msg);},
   error: function(error){alert(error);}
});

实例中通用的HTML表单:

<form id="formID">
    姓名 <input value="摘取天上星" name="Name" />
    职位 <input value="IT技术" name="position" />
        <input id="button" value="提交" type="button" />
</form>

jQuery使用serialize(),serializeArray()方法取得表单数据+字符串和对象类型两种表单提交的方法

时间: 2024-11-23 16:38:08

jQuery使用serialize(),serializeArray()方法取得表单数据+字符串和对象类型两种表单提交的方法的相关文章

解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法

解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法,如下: 为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: ? 1 2 3 4 5 6 7 8 9 10 11 <p id="pLabel">新加一条</p> <ul id="ulLabel">  <li class="liLabel">aaa1</li>  <li class="li

js 禁止表单提交的方法(文件上传)

添加图片上传的表单,在form 添加属性onsubmit,提交之前会执行其中的方法,若返回FALSE,不会提交,返回TRUE,才会提交 <form method="post" enctype="multipart/form-data" action="/UpLoad.ashx" onsubmit="return check()"> <input type="file" name="

placeholder和json两种实现登录隐藏的方法

<head> <title> placeholder和json两种实现登录隐藏的方法 </title> <script type="text/javascript"> //判断浏览器是否支持 placeholder属性 function isPlaceholder() { var input = document.createElement('input'); return 'placeholder' in input; } if (!i

INNODB与MyISAM两种表存储引擎区别

mysql数据库分类为INNODB为MyISAM两种表存储引擎了,两种各有优化在不同类型网站可能选择不同,下面小编为各位介绍mysql更改表引擎INNODB为MyISAM技巧. 常见的mysql表引擎有INNODB和MyISAM,主要的区别是INNODB适合频繁写数据库操作,MyISAM适合读取数据库的情况多一点,如何把表引擎INNODB更改为MyISAM呢? 使用以下mysql sql语句,可以给表设定数据库引擎: ALTER TABLE `wp_posts` ENGINE = MyISAM;

SELECT INTO 和 INSERT INTO SELECT 两种表复制语句

SELECT * into xnbData from (select * from xnbXlsData) select * INTO xnbData from xnbXlsData  ------------------------------ Insert是T-sql中常用语句,Insert INTO table(field1,field2,...) values(value1,value2,...)这种形式的在应用程序开发中必不可少.但我们在开发.测试过程中,经常会遇到需要表复制的情况,如

select into from和insert into select from两种表复制语句区别

select into from和insert into select from两种表复制语句区别 select * into target_table from source_table; insert into target_table(column1,column2) select column1,5 from source_table; 以上两句都是将源表source_table的记录插入到目标表target_table,但两句又有区别.第一句(select into from)要求目标

两种 js下载文件的方法(转)

function DownURL(strRemoteURL, strLocalURL){ try{ var xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP"); xmlHTTP.open("Get", strRemoteURL, false); xmlHTTP.send(); var adodbStream = new ActiveXObject("ADODB.Stream"); adodbStrea

两种局部刷新UITableView的方法的使用条件

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ //1.取消选中这一行 [tableView deselectRowAtIndexPath:indexPath animated:YES]; //2.获取当前选中的数据 Shop *shop = _shops[indexPath.row]; //3.控制当前cell是否被选中 if( [_deleteShops

JavaScript强化教程——DOM编程(两种控制div移动的方法)

本文为H5EDU机构官方HTML5培训教程,主要介绍:JavaScript强化教程--DOM编程(两种控制div移动的方法) 第一种 按钮控制首先 创建两个html按钮和一个div并给div一个样式 input type="button" value="左" id="1"> <input type="button" value="右" id="2"> <div i