jQuery梳理之表单

sgls652709

于 2016-06-27 00:15:51 发布

阅读量346

点赞数

分类专栏：待分类文章标签： jquery

本文链接：https://blog.csdn.net/sgls652709/article/details/51757393

版权

待分类专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

本文内容摘自《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或者对象，[] 对应数组或者集合