澳门皇冠金沙网站-澳门皇冠844网站

热门关键词: 澳门皇冠金沙网站,澳门皇冠844网站

方法使用示例,输出序列化form表单值的方法

.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

jQuery ajax serialize() 方法使用示例,jqueryserialize

.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

<!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"> 
<head> 
<title></title> 
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script type="text/jscript"> 
// $(function () { 
// alert($("form").serialize()); 
// }) 

function btnClick() { 
alert($("form").serialize()); 
} 
</script> 
</head> 
<body> 
<form> 
<div><input type="text" name="a" value="1" id="a" /></div> 
<div><input type="text" name="b" value="2" id="b" /></div> 
<div><input type="hidden" name="c" value="3" id="c" /></div> 
<div> 
<textarea name="d" rows="8" cols="40">4</textarea> 
</div> 
<div><select name="e"> 
<option value="5" selected="selected">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
</select></div> 
<div> 
<input type="checkbox" name="f" value="8" id="f" /> 
</div> 
<div> 
<input type="button" name="g" value="提交" id="g" onclick="btnClick()" /> 
</div> 
</form> 

</body> 
</html> 

点击提交:

输出标准的查询字符串:a=1&b=2&c=3&d=4&e=5

如果将复选框也选上的话 输出的就是:a=1&b=2&c=3&d=4&e=5&f=8

jQuery ajax()使用serialize()提交form数据

jQuery的serialize()方法通过序列化表单值,创建URL编码文本字符串,我们就可以选择一个或多个表单元素,也可以直接选择form将其序列化,如:

<form action="">
First name: <input type="text" name="FirstName" value="Bill" /><br />
Last name: <input type="text" name="LastName" value="Gates" /><br />
</form>

$(document).ready(function(){
    console.log($("form").serialize()); // FirstName=Bill&LastName=Gates
});

这样,我们就可以把序列化的值传给ajax()作为url的参数,轻松使用ajax()提交form表单了,而不需要一个一个获取表单中的值然后传给ajax(),举例如下:

$.ajax({
    type: 'get',
    url: 'your url',
    data: $("form").serialize(),
    success: function(data) {
        // your code
    }
});
<!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"> 
<head> 
<title></title> 
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script type="text/jscript"> 
// $(function () { 
// alert($("form").serialize()); 
// }) 

function btnClick() { 
alert($("form").serialize()); 
} 
</script> 
</head> 
<body> 
<form> 
<div><input type="text" name="a" value="1" id="a" /></div> 
<div><input type="text" name="b" value="2" id="b" /></div> 
<div><input type="hidden" name="c" value="3" id="c" /></div> 
<div> 
<textarea name="d" rows="8" cols="40">4</textarea> 
</div> 
<div><select name="e"> 
<option value="5" selected="selected">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
</select></div> 
<div> 
<input type="checkbox" name="f" value="8" id="f" /> 
</div> 
<div> 
<input type="button" name="g" value="提交" id="g" onclick="btnClick()" /> 
</div> 
</form> 

</body> 
</html> 

jquery ajax 提交表单,serialize()序列化表单数据,但其对type=file的input也就是上传不支持,怎办?

图片上传可以提前进行,先上传再提交就不会有这种问题!
如果非要一起提交的话,那可以把file单独加入到提交序列中
$("form").serialize() "&fileInput=" $("input[name='fileInputName']").val();这样也是可以的

 

补充

输出标准的查询字符串:
a=1&b=2&c=3&d=4&e=5
注释:只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单,则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中,元素必须使用 name 属性。

本文由澳门皇冠金沙网站发布于前端开发,转载请注明出处:方法使用示例,输出序列化form表单值的方法