jQuery_review之使用jQuery的Ajax必须知道的，serialize、param方法以及全局函数

浏览数：24 / 时间：2015年06月09日

在项目中可能会碰到这样的几个问题：

第一个问题，我们需要实现一个基于ajax的异步程序，我们也相当的熟悉ajax中是可以通过{name:name,address:address}这种方式来进行传递参数的。但是，当任务下达的那一刻，我们发现前端的form表单非常的庞大，庞大的我没有耐心去一个一个的拼字符串。

第二个问题，我们需要将一个充满的checkbox的用户调查表传递给后台，额，难道需要我们写一个过滤器，然后通过each进行遍历，然后拼成这样的一个参数表么？如果你对jQuery的选择器比较了解的话，当然可以非常愉快的完成，但是一个成熟的屌丝民工当然是拿来主义，看有没有更加合适的方法，直接拿过来就用。

第三个问题，我们约定了与后台进行交互时候要使用JSON格式，也就意味着我们要将前台的内容变成JSON，然后给后台扔过去，应该怎么办呢？肯定有大量的码农前辈在经历了这样的痛苦之后，留下了很多宝贝，肯定是有这样的方法的！
第四个问题，如果让我们设计一个框架，为了防止用户在当前页面发送异步请求的时候操作页面，我们将为当前的操作增加一个蒙层的效果，让用户在一段时间之内不能够操作当前的页面，还要在异步请求发送完成之后，能够操作当前的页面，这个应该怎么办？
第五个问题，web服务器与后台的server经常会因为后台的服务停掉，或者是网络暂时不能够接通而导致前台无法与后台通信，但是ajax仍旧会正常的发出，如果没有一个全局的机制来告诉用户，这个也是非常不友好的，碰上这种问题，我们应该如何解决呢？

好吧，现在依次来解答上面的问题：

第一个，请google “form.serialize()”方法，有了它，就能够将当前表单中的所有内容进行序列化。

第二个，请google “$(":checkbox,:password").serialize()”，这个serialize方法可以是form表单选择器。

第三个，请google “serializeArray()”方法，这个方法就可以讲jQuery对象转成jSon对象，然后可以与后台进行交互了。

第四个和第五个问题，请多多关注jQuery的全局方法，这个是在前端处理异常，或者提升用户体验度非常有用的一系列方法，只有四到五个方法，还是比较容易记忆的。好运~@新的一周愉快！

前端代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#serializeForm").click(function(event){
				$("#content").val($("form").serialize());
			});
			$("#serializeChecked").click(function(event){
				$("#content").val($(":checkbox,:radio,:password").serialize());
			});
			$("#testParam").click(function(event){
				$("#content").val($.param({name:'ziwen',address:'address'}));
			});
			$("#serializeArray").click(function(event){
				$("#content").val($("form").serializeArray());
			});
		});
  	</script>
  </head>
  <body>
  	<textarea rows="5" cols="30" id="content"></textarea>
  	<form action="#">
  		<label for="name">name：</label><input type="text" name="name"><br>
  		<label for="password">password：</label><input type="password" name="password"><br>
  		<label for="yesOrNo">yesOrNo：</label><input type="checkbox" name="yesOrNo"><br>
  		<label for="sex">sex：</label>
  			<input type="radio" name="sex" value="0">
  			<input type="radio" name="sex" value="0"><br>
  		<input type="button" id="serializeForm" value="serializeForm">
  		<input type="button" id="serializeChecked" value="serializeChecked">
  		<input type="button" id="serializeArray" value="serializeArray">
  		<input type="button" id="testParam" value="testParam">
  	</form>
  </body>
</html>

jQuery_review之使用jQuery的Ajax必须知道的，serialize、param方法以及全局函数,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery_review之使用jQuery的Ajax必须知道的，serialize、param方法以及全局函数