纠正《从零开始学习jQuery》的几处错误
前两天看了一下《从零开始学习jQuery 》,从中学了很多东西,但是本着求真的精神,也发现其中几处错误。
一、Ajax函数中的错误
原文:
load( url, [data], [callback] )
Returns: jQuery包装集
说明:
load方法能够载入远程 HTML 文件代码并插入至 DOM 中。
默认使用 GET 方式, 如果传递了data参数则使用Post方式.
------------------------------------------------------------------------------
jQuery.post( url, [data], [callback], [type] )
Returns: XMLHttpRequest
说明:
通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
讲解:
具体用法和get相同, 只是提交方式由"GET"改为"POST".
错误说明:
实际上,考虑下面的三种调用方式:
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="info"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("#info").load(
"test.php?arg1=arg1",
{arg2:"arg2",arg3:"arg3"}
);
$.post(
"test.php?arg1=arg1",
{arg2:"arg2",arg3:"arg3"},
function(data){alert(data);}
);
$.get(
"test.php?arg1=arg1",
{arg2:"arg2",arg3:"arg3"},
function(data){alert(data);}
);
</script>
</body>
</html>
<?php
echo '$_GET["arg2"] == '.$_GET["arg2"]."<br>";
echo '$_GET["arg2"] == '.$_GET["arg2"]."<br>";
echo '$_GET["arg3"] == '.$_GET["arg3"]."<br>";
echo '$_POST["arg1"] == '.$_POST["arg1"]."<br>";
echo '$_POST["arg2"] == '.$_POST["arg2"]."<br>";
echo '$_POST["arg3"] == '.$_POST["arg3"]."<br>";
?>
可以发现,使用load()和$.post()的结果是一样的,arg1被浏览器以get方式发送,而arg2与arg3被post发送。而$.get()的情况是,arg1、arg2和arg3都被以get方式发送。
由此有结论:load()和$.post()中,cgi方式的url中带的值是以get方式发送的,load()其实是$.post的变种。也可以看出在jquery中是大概如何定义这三种方法以及$.ajax()的:
$.ajax(option):把option.url传给XMLHttpRequest的open()方法,把option.data序列化后传给send()方法。
$.post():把url和data参数不作处理的传给$.ajax()。
$.get():把data参数序列化后附到url后面,然后只传一个url给$.ajax。
load():对jquery包装集中的每个对象调用$.post(url,data,function(data){$(this).html(data)});
说明:jquery里也许不是这样定义的(没去看源码),但是思路一定是这样的。
=================================================================
二、工具函数中的错误
原文:
jQuery.each( object, callback )
返回值:Object
说明:
通用例遍方法,可用于例遍对象和数组。
不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。
如果传递的是对象, 则遍历对象的每一个属性, 即使函数返回false也依然会遍历完所有的属性, 第一个参数表示属性key(属性名称,是obejct类型),第二个参数表示值,,this表示当前属性的值:
测试代码:![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$("#iterateArray").click(function(event){
var array = $.each(["a", "b", "c"], function(i, n){
//第一个参数i表示索引, this表示当前遍历的对象
alert("Item #" + i + ": " + n );
if (i >= 1){
return false;
}
});
});
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$("#iterateObject").click(function(event){
$.each({name: "ziqiu.zhang", sex: "male", status: "single" }, function(i, n){
//第一个参数i表示属性的key(object), this表示属性值
alert("Item #" + i.toString() + ": " + n );
if (i >= 1){
return false;
}
});
});
错误说明
实际上,即使传递的是对象,在函数返回false时也会退出each循环,作者之所以作出错误判断,是因为他的测试函数在传入对象时,if判断条件一直为false,所以没有执行到return false那一句。就要把判断条件稍微改一下就行了:
$("#iterateObject").click(function(event){
$.each({name: "ziqiu.zhang", sex: "male", status: "single" }, function(i, n){
//第一个参数i表示属性的key(object), this表示属性值
alert("Item #" + i.toString() + ": " + n );
if(i.toString() == "sex"){
return false;
}
});
});