表单处理
访问量:849

在对表单进行处理时,常见的操作主要由数据读取、数据验证、表单提交。jQuery在数据读取以及提交方面,可以发挥到一定的优势,但是数据的验证,我们还是借助其他插件比较合适,如validate.jsform-validation等。本文,主要聊聊,表单的数据读取以及提交。

一、数据读取

使用jQuery读取表单数据,首先得熟悉怎样选择元素,可以查看元素的基本选择,其次是读取表单控件(如input, select 和 textarea)中的值,JQuery提供了val()方法来获取表单控件的值。如下:

// 从name为bar的复选框获取选中值
$( "input[type=checkbox][name=bar]:checked" ).val();
 
// 从一组name为baz的单选按钮获取选中值
$( "input[type=radio][name=baz]:checked" ).val();

注意: 通过 .val() 方法从 <textarea> 元素中获取的值是不含有回车(\r)字符的。但是如果该值是通过 XHR 传递给服务器的,回车(\r)字符会被保留(或者是被浏览器添加的,但是在原始数据中并不包含回车( ))。可以使用下面的 valHook 方法解决这个问题:

$.valHooks.textarea = {
  get: function( elem ) {
    return elem.value.replace( /\r?\n/g, "\r\n" );
  }
};

二、表单提交

使用jQuery提交表单,也就是使用jQuery中ajax提交表单,通常我们不是逐个读取表单控件中的值,然后在拼接或是组合,而往往是借助jQuery中的serialize()或是serializeArray()自动帮我们序列化处理。serialize()与serializeArray()区别是,前者返回的是键值对拼接而成的字符串,后者返回的是json对象。但是关于序列化,我们需要注意以下:

注意: 只有 "successful controls"可以被序列化成字符串。其中,提交按钮的值不会被序列化。另外,如果想要一个表单元素的值被序列化成字符串,这个元素必须含有 name 属性。此外,复选框(checkbox)和单选按钮(radio)(input 类型为 "radio" 或 "checkbox")的值只有在被选中时才会被序列化。另外,文件选择元素的数据也不会被序列化。

如一个id为userForm的表单,使用jQuery提交的做法如下:

 $("#userForm").submit(function(){
  	//禁用提交按钮,防止重复提交
  	var $_self = $(this);
	$.ajax({
	  method: "POST", //提交方法
	  url: "http://www.findme.wang", //提交网址
	  data: $_self.serializeArray()
	}).done(function(data) {
	     //业务处理
	     if (data['status']) { 

	     } else {

	     }
	     //启用提交按钮
	});
	return false;
});


请在下面输入需要执行的语句