您的位置：首页 > Web前端 > JQuery

jQuery梳理之表单

2016-06-27 00:15 387 查看

前言

本文内容摘自《jQuery中文网》，主要是对平时经常操作的表单的jQuery函数进行梳理

正文

.blur()

为 "blur" 事件绑定一个处理函数，或者触发元素上的 "blur" 事件（注：此事件不支持冒泡）。

.prop()

需要和attr做下区别，$("select option:first").prop("selected",true)。而不用attr("selected",true)

.change()

为JavaScript 的 "change" 事件绑定一个处理函数，或者触发元素上的 "change" 事件。

.focus()

为 JavaScript 的 "focus" 事件绑定一个处理函数，或者触发元素上的 "focus" 事件。

.focusin()

focusin 事件会在元素（或者其内部的任何元素）获得焦点时触发。这跟 focus 事件的显著区别在于，它可以在父元素上检测子元素获得焦点的情况(换而言之，它支持事件冒泡)。

.focusout()

focusout 事件会在元素（或者其内部的任何元素）失去焦点时触发。这跟 blur 事件的显著区别在于，它可以在父元素上检测子元素失去焦点的情况(换而言之，它支持事件冒泡)。

.select()

当用户在一个元素中进行文本选择时，这个元素上的select事件就会被触发。此事件只能用在<input type="text"> 和<textarea>。

.submit()

当用户试图提交表单时，就会在这个表单元素上触发submit事件。它只能绑定在<form>元素上。以下几种情况会导致表单被提交：用户点击了<input type="submit">, <input type="image">, 或者 <button type="submit">，或者当某些表单元素获取焦点时，敲击Enter（回车键），都可以提交。

.val()

获取匹配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值。note:这里需要和text() / html() 做区别。 val对应value 属性

下面的函数有必要好好研究一下

jQuery.param()

将对象序列化成字符串，key=value&key=value的形式

例子：简单的对象序列化成字符串

<script>
var obj = {name:"first",value:"Rick"};
var text = $.param(obj)
alert(text); //输出 name=first&value=Rick
</script>

如果obj是var obj = {name:”name”,value:”Rick”,name:”good”};，那么重复的后一个key的value内容覆盖前一个key的value，得到的结果是name=good&value=Rick。因此在传递obj是需要注意这点（最好不要重复）。如果真的需要有重复的需求，那么自定义一个函数并使用param和serializeArray处理（循环遍历并组成querying如name=one&name=two）

.serialize()

想要一个表单元素的值被序列化成字符串，这个元素必须含有 name 属性，复选框（checkbox）和单选按钮（radio）(input 类型为 “radio” 或 “checkbox”)的值只有在被选中时才会被序列化。另外，文件选择元素的数据也不会被序列化。

表单序列化例子

<body>
<form>
<input type="text" name="username" />
<select name="habit">
<option value="1">play game</option>
<option value="2">code</option>
<option value="3">reading</option>
</select>
man<input type="radio" name="sex" value="0">
woman<input type="radio" name="sex" value="1">
android
<input type="checkbox" name="check" value="android" />
ios
<input type="checkbox" name="check" value="ios"  />
</form>
<button>handle</button>
<script>
$("button").on('click',function(){
var text = $("form").serialize();
alert(text);
})
</script>
</body>

important note: 以name为key 以value为value ，每个表单元素使用&连接。它可以指定jQuery选择器来序列化，可以序列化表单。 param（）是序列化对象或数组，param和serializeArray 来实现serialize

.serializeArray()

.serializeArray() 方法将表单编码成一个Json对象，可以对单独选择的表单元素对象进行操作。

这个函数得到的对象如下面所示，在使用ajax的contentType:applicaton/json的时候需要将它转成json字符串，.serializeArray()得到的还是一个对象，使用JSON.stringify()。

如果将这样的json字符串传后台，我们很容易得到400 bad request,

因为我们的json格式不对，还需要自定义serializeObject转化一下

[
{
name: "a",
value: "1"
},
{
name: "b",
value: "2"
},
{
name: "c",
value: "3"
},
{
name: "d",
value: "4"
},
{
name: "e",
value: "5"
}
]

一个ajax以application/json上传的例子

function handleUseJson() {
var params = $("form").serializeObject();
$.ajax({
url :  basePath+"/demo4json.do",
dataType:"json",
contentType: "application/json; charset=utf-8",
type : "post",
data : JSON.stringify(params),
success : function(result) {
alert(result.success);
}
});
}
$.fn.serializeObject = function(){
var option = {};
var array = this.serializeArray();
$.each(array, function() {
if (option[this.name] !== undefined) {
if (!option[this.name].push) {
option[this.name] = [option[this.name]];
}
option[this.name].push(this.value || '');
} else {
option[this.name] = this.value || '';
}
});
return option;
}

结束语

form表单的提交，有其他jQuery插件，如jQuery.form.js.所以没必要自己去序列化得到表单的值。

表单有多个相同的name，如check，那么param()方法的序列化就是name=one&name=two,在后台中，可以用String[]数组来接收,这是contentType为application/x-www-form-urlencoded;charset=UTF-8的情况；

如果是contentType为application/json的话，可以将check的值拼接成一个字符串，在放到json对象中，用JSON.stringfiy转化成字符串上传。也可以在这个json对象中用数组来存放check值，如{check:[better,man]},然后使用JSON.stringfiy转化成字符串。后台json字符串映射规则： {} 对应map或者对象，[] 对应数组或者集合

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航