首页 > 代码库 > JQuery的一些注意事项(2)- AJAX 学习笔记
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插件,用来延迟加载长页面的图片。在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.)
JQuery的一些注意事项(2)- AJAX 学习笔记
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。