JQuery的一些注意事项- AJAX 学习笔记

Posted 2020-09-22 圈地自萌

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插件，用来延迟加载长页面的图片。在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.）