JQuery的一些注意事项（2）- AJAX 学习笔记
1. 动态加载外部文件：
/*AJAX 动态加载外部文件*/ $(document).ready(function () { $('#btn1').click(function () { $('#log-content').load('data/logs.txt'); //这个txt文件内容如果是中文，需要保存成utf-8编码格式 }) })
2. 动态加载外部网页：
/*AJAX 动态加载外部网页*/ $(document).ready(function () { $('#btn1').click(function () { $('#log-content').load('http://localhost:63342/jQuery/data/htmldata.html?_ijt=sgjc9obth398kjjjv314ntgs17'); }) })
默认情况下，jQuery的load()函数会使用HTTP的Get函数向服务器发送数据请求，传递参数时，会自动以POST方式提交数据。
3. 加载网页文件内容并传递服务端参数
<label for="parameters"></label> <select name="parameters" size="5" id="parameters"> <option value="1" selected="selected">url</option> <option value="2">data</option> <option value="3">callback</option> </select> <br> <div> <input id="btn1" type="button" value="获取外部文件"> <div id="log-content"></div> </div>
$(document).ready(function () { $('#btn1').click(function () { $name = $("#parameters option:selected").val(); //层次选择器在一个“”内以空格区分 $('#log-content').empty().load('demo.php',{name:$name}); }) });
用户从客户端的列表框选择一个参数值，点击事件发生后，将从服务端的PHP文件获取参数的描述
/*要获取的PHP文件*/ <?php switch($_POST['name']){ case 1: echo '必需的URL参数规定用户希望加载的URL'; break; case 2: echo '可选参数：data。 规定与请求一同发送的查询字符串键/值对集合。'; break; case 3: echo '可选参数：callback。 load函数完成后所执行的函数名称。'; break; } ?>
4. 使用 AJAX 无刷新网页删除记录（比如微博）
<div id="container"> <h3>留言内容</h3> <div id="load" align="center"></div> <div class="box"> <div class="text"> <span>张三</span> <br> 很好用的留言板 <div class="date">2017-05-21</div> </div> <!--删除链接，每个链接的id值，指向数据库当前记录的id--> <a href="" id="1" class="delete">删除</a> <div class="clear"></div> </div> </div> <script> $(function () { $('.delete').click(function () { var commentContainer = $(this).parent(); var id = $(this).attr('id'); var string = 'id=' + id;//构造参数字符串 $.ajax({ type:"POST", url: "ajax_delete_Server.php", data:string,//传递的参数字符串 cache:false, //不缓存 success:function () { commentContainer.slideUp('slow',function () { $(this).remove(); }); } }); return false; }) }) </script>
调用$.ajax()，向 ajax_delete_Server.php 文件发送一个AJAX请求，用来删除留言。
总结：可以看出，$.ajax()和load()方法都可以用来加载服务端数据。
load()方法根据参数来决定是用GET还是POST。没有参数就是GET，带参数就是POST。这个参数可以指定要获取文件的特定内容。
$.ajax()是底层方法，它可以代替load()方法。
5. 验证插件，validator.min.js中，有一个方法，optional(element).
jQuery.validate的optional(element)，用于表单控件的值不为空时才触发验证。
当element为空时this.optional(element)=true，用于在该控件为非必填项目时可以通过验证，及条件可以不填但是不能填错格式。
// 中文字两个字节 jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { var length = value.length; for(var i = 0; i < value.length; i++){ if(value.charCodeAt(i) > 127){ length++; } } return this.optional(element) || ( length >= param[0] && length <= param[1] ); }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
这个插件的异步验证：使用 ajax 方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用 data 选项。
remote: { url: "check-email.php", //后台处理程序 type: "post", //数据发送方式 dataType: "json", //接受数据格式 data: { //要传递的数据 username: function() { return $("#username").val(); } } }
6. 页面滚动时加载新的网页内容。
$(document).ready(function () { $('#load_max').val(50);//为隐藏域赋值50，表示一次加载50条记录。 }); var loading = false;//全局变量，指定当前是否正在加载服务端内容。 $(window).scroll(function () { //如果当前窗体的高度大于文档的高度 if ((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){ if(loading===false){ loading=true; //设置文档加载状态 $('#loadingbar').css('display', 'block'); //显示加载提示条 $.get("xxx.php?start="+$('#load_max').val(), function (loaded) { $('body').append(loaded); //在隐藏区域中设置新的起始值 $('#load_max').val(parseInt($('#load_max').val())+50); $('#loadingbar').css('display','none'); //隐藏状态条 loading=false; //结束加载的状态 }); } } });
滚动加载内容的核心是关联window的onscroll事件。判断当前滚动条位置，若高于当前文档的高度，则向服务端发送数据请求。
（此外，jQuery有一个lazyload插件，用来延迟加载长页面的图片。在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.）
