首页 > 代码库 > 前端编程提高之旅(十七)----jquery中表单、表格和ajax

前端编程提高之旅(十七)----jquery中表单、表格和ajax

        从一个框架核心功能层面上说,实现了选择器、DOM操作、事件、动画,功能已经完备了。而任何框架写出了就是应用的,所以这篇涉及的表单与表格知识,虽在DOM操作中有所涉及,但更偏于实际项目中的应用技巧的使用。ajax部分的内容更是前端与后端交互的核心。

   一、jQuery中的表单与表格应用

   实际项目中,表单和表格分别扮演采集、提交用户输入的信息和显示列表的数据。在HTML中非常重要。下面是这部分知识导图:


   1.表单

   (1)单行文本框

    单行文本框职能是获取用户输入的指定格式的数据。这就涉及两点交互。


    这两点交互都体现在获取焦点与失去焦点的变化上,当获取焦点时,单选框添加背景色、内容提示清空。失去焦点时,背景色去除,如果内容为空,内容提示恢复。

   jQuery代码如下:

$(":input").focus(function(){
			  $(this).addClass("focus");
			  if($(this).val() ==this.defaultValue){  
                  $(this).val("");           
			  } 
		}).blur(function(){
			 $(this).removeClass("focus");
			 if ($(this).val() == '') {
                $(this).val(this.defaultValue);
             }
		});

     (2)多行文本框

   多行文本框一个比较重要的应用是控制滚动条的变化。如果有上滑的命令,则对文本框滚动条上移50px。反之亦然。

   jQuery代码如下:

var $comment = $('#comment');//获取评论框
	    $('.up').click(function(){ //向上按钮绑定单击事件
		   if(!$comment.is(":animated")){//判断是否处于动画
				$comment.animate({ scrollTop  : "-=50" } , 400);
			}
		})
		$('.down').click(function(){//向下按钮绑定单击事件
		   if(!$comment.is(":animated")){
				$comment.animate({ scrollTop  : "+=50" } , 400);
			}
		});

      (3)复选框应用

   复选框对于用户文件管理非常重要,主要涉及三个功能:全选、全不选、反选。此三个功能都会涉及修改每个复选框checked属性。

   实现如上三个功能代码如下:

$("#CheckedAll").click(function(){
	     $('[name=items]:checkbox').each(function(){
	     	this.checked = true;
	     })
	 });
	 //全不选
     $("#CheckedNo").click(function(){
	    $('[name=items]:checkbox').each(function(){
	    	this.checked=false;
	    });
	 });
	 //反选
     $("#CheckedRev").click(function(){
		  $('[name=items]:checkbox').each(function(){	
			//直接使用JS原生代码,简单实用
			this.checked=!this.checked;
		  });

     实现上述功能仅仅是第一步,常见的全选/全不选是一个按钮,当列表选项全选时,全选又必须选中。所以全选与列表项存在着双向通信。体现在代码中,就必须做到双向控制:即除了对自身状态的修改,还需要判断是否需要修改另一个的状态。

   如下代码采用一个临时变量记录,判断是否全选中:

//全选
        $("#CheckedAll").click(function() {
            //所有checkbox跟着全选的checkbox走。
            var self =this;
            $('[name=items]:checkbox').each(function(){
            	this.checked=self.checked;
            });
        });
        $('[name=items]:checkbox').click(function() {
            //定义一个临时变量,避免重复使用同一个选择器选择页面中的元素,提升程序效率。
            var $tmp = $('[name=items]:checkbox');
            //用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。
            $('#CheckedAll').attr('checked', $tmp.length == $tmp.filter(':checked').length);
        });

      (4)下拉框应用

   下拉框的应用主要集中于两栏之间,下拉项在下拉框之前切换,主要涉及option标签selected属性用来筛选选中项,另外涉及dom移动。主要涉及移动选中、全部移动、双击移动。注意双击移动采用了上下文筛选移动项。

   代码如下:

$('#add').click(function() {
	//获取选中的选项,删除并追加给对方
		$('#select1 option:selected').appendTo('#select2');
	});
	$('#add_all').click(function() {
		//获取全部的选项,删除并追加给对方
		$('#select1 option').appendTo('#select2');
	});
	$('#select1').dblclick(function(){ //绑定双击事件
		//获取全部的选项,删除并追加给对方
		$("option:selected",this).appendTo('#select2'); //追加给对方
	});

     (5)表单验证

   表单验证最为常见,需要对用户输入信息实时提示,这里采用失去焦点判断的方法,为了实时显示,同时在keyup和focus事件中,都触发blur方法,同时避免浏览器默认blur事件。

   代码如下:

 $('form :input').blur(function(){
			 var $parent = $(this).parent();
			 $parent.find(".formtips").remove();
			 //验证用户名
			 if( $(this).is('#username') ){
					if( this.value=http://www.mamicode.com/="" || this.value.length < 6 ){>
            2.表格

   (1)展开关闭

    表格的展开关闭,也即展开关闭两种状态的切换,前面动画讲过toggle方法可以切换显示隐藏,这里通过点选控制同类兄弟节点的关闭显示切换。

   代码如下:

   

$('tr.parent').click(function(){   // 获取所谓的父行
			$(this)
				.toggleClass("selected")   // 添加/删除高亮
				.siblings('.child_'+this.id).toggle();  // 隐藏/显示所谓的子行
	}).click();

   (2)内容筛选

    对于列表的内容筛选,主要采用过滤方法filter,筛选包含指定内容的列表项。当keyup时即筛选。

    代码如下:

   

$("#filterName").keyup(function(){
	      $("table tbody tr")
					.hide()
					.filter(":contains('"+( $(this).val() )+"')")
					.show();
	   }).keyup();

   二.jquery与ajax

   Ajax出现最大的意义在于,改变了以往前后端传数据需要全页面刷新来获取页面内容的方式,可以局部刷新页面。工作原理是在客户端实现了一个ajax引擎,使用户操作与服务器响应异步化。

   《jQuery攻略》上列出了ajax几大不足,但这似乎并没有影响ajax的广泛应用。作为前端开发人员,ajax带来的最大弊病就是异步响应的问题。异步响应需要开发人员时刻保持对时序执行逻辑的关注,往往很多问题都处在这里。

   jQuery提供了非常简便的ajax操作,代替了原生代码复杂冗余的操作,使ajax应用变得简单。以下是乐帝对ajax这部分内容的知识导图:


    1. ajax操作方法

    如上知识所示,ajax操作方法可以分为三层,由简单到复杂,由高层到底层。其中第二层最常用。这几个ajax方法底层都是对原生ajax方法的封装。但应用场景稍有不同,越是上层应用场景越具针对性,灵活性则不足。最底层$.ajax()灵活性虽足,配置起来则更为复杂。

   每个ajax操作方法都会涉及的参数有3个url(请求地址)、data(发送至服务器数据)、callback(请求完成时回调)。

   最常用的两个分别是$.get()与$.post(),两者分别对应ajax操作的get请求方式与post请求方式,这两种方式区别有三点:


   $.getScript()与$.getJSON()两个ajax方法分别是针对动态加载脚本与json文件场景设定的方法。

   $.ajax()方法是上述ajax操作方法最底层的构建,此方法可以替代上述方法。

   2.参数序列化方法

   本文第一部分提到表单是获取用户数据的方式,用户填写完表单,发送到服务器就需要收集用户表单数据。如果一个个取数据还是很繁琐的。

   参数序列化方法正是自动将表单数据序列化,用于ajax请求。

   serialize()用于将DOM元素内容序列化为字符串:


        serializeArray()用于将DOM元素序列化,返回JSON格式数据:


        $.param()方法用来对数组或对象键值对序列化:


   3.ajax请求控制方法

   这里主要涉及两个方法:Ajax请求开始时,会触发ajaxStart方法;Ajax请求结束时,会触发ajaxStop方法。常用于加强用户体验,给用户添加加载提示。

   使用示例:

$("#send").click(function(){
			  $("#resText").load("test.html");
	  })
	  $("#resText").ajaxStart(function(){
	  	console.log("ajax has started");
	  });
	  $("#resText").ajaxStop(function(){
	  	console.log("ajax has stopped");
	  });


前端编程提高之旅(十七)----jquery中表单、表格和ajax