zoukankan      html  css  js  c++  java
  • 局部方法$("html").load()和全局方法$.get()、$.post()

    一、.load()

    .load()方法可以参数三个参数:url(必须,请求 html 文件的 url 地址,参数类型为 String)、
    data(可选,发送的 key/value 数据,参数类型为 Object)、callback(可选,成功或失败的回调
    函数,参数类型为函数 Function)。
    如果想让 Ajax 异步载入一段 HTML 内容,我们只需要一个 HTML 请求的 url 即可。
    //HTML
    <input type="button" value="异步获取数据" />
    <div id="box"></div>
    //jQuery
    $('input').click(function () {
    $('#box').load('test.html');
    });
    如果想对载入的 HTML 进行筛选,那么只要在 url 参数后面跟着一个选择器即可。
    //带选择器的 url
    $('input').click(function () {
    $('#box').load('test.html .my');
    });
    如果是服务器文件,比如.php。一般不仅需要载入数据,还需要向服务器提交数据,那
    么我们就可以使用第二个可选参数 data。向服务器提交数据有两种方式:get 和 post。
    //不传递 data,则默认 get 方式
    $('input').click(function () {
    $('#box').load('test.php?url=ycku');
    });
    //get 方式接受的 PHP
    <?php
    if ($_GET['url'] == 'ycku') {
    echo '瓢城 Web 俱乐部官网';
    } else {
    echo '其他网站';
    }
    ?>
    //传递 data,则为 post 方式
    $('input').click(function () {
    $('#box').load('test.php', {
    url : 'ycku'
    });
    });
    //post 方式接受的 PHP
    <?php
    if ($_POST['url'] == 'ycku') {
    echo '瓢城 Web 俱乐部官网';
    } else {
    echo '其他网站';
    }
    ?>
    在 Ajax 数据载入完毕之后,就能执行回调函数 callback,也就是第三个参数。回调函数
    也可以传递三个可选参数:responseText (请求返回)、textStatus (请求状态)、XMLHttpRequest
    (XMLHttpRequest 对象)。
    $('input').click(function () {
    $('#box').load('test.php', {
    url : 'ycku'
    }, function (response, status, xhr) {
    alert('返回的值为:' + response + ',状态为:' + status + ',
    状态是:' + xhr.statusText);
    });
    });
    注意:status 得到的值,如果成功返回数据则为:success,否则为:error。XMLHttpRequest
    对象属于 JavaScript 范畴,可以调用一些属性如下:
    属性名 说明
    responseText 作为响应主体被返回的文本
    responseXML
    如果响应主体内容类型是"text/xml"或"application/xml",
    则返回包含响应数据的 XML DOM 文档
    status 响应的 HTTP 状态
    statusText HTTP 状态的说明
    如果成功返回数据,那么 xhr 对象的 statusText 属性则返回'OK'字符串。除了'OK'的状态
    字符串,statusText 属性还提供了一系列其他的值,如下:
    HTTP 状态码 状态字符串 说明
    200 OK 服务器成功返回了页面
    400 Bad Request 语法错误导致服务器不识别
    401 Unauthorized 请求需要用户认证
    404 Not found 指定的 URL 在服务器上找不到
    500 Internal Server Error 服务器遇到意外错误,无法完成请求
    503 ServiceUnavailable 由于服务器过载或维护导致无法完成请求
    三.$.get() 和$.post()
    .load()方法是局部方法,因为他需要一个包含元素的 jQuery 对象作为前缀。而$.get()和
    $.post()是全局方法,无须指定某个元素。对于用途而言,.load()适合做静态文件的异步获取,
    而对于需要传递参数到服务器页面的,$.get()和$.post()更加合适。
    $.get()方法有四个参数,前面三个参数和.load()一样,多了一个第四参数 type,即服务
    器返回的内容格式:包括 xml、html、script、json、jsonp 和 text。第一个参数为必选参数,
    后面三个为可选参数。
    //使用$.get()异步返回 html 类型
    $('input').click(function () {
    $.get('test.php', {
    url : 'ycku'
    }, function (response, status, xhr) {
    if (status == 'success') {
    $('#box').html(response);
    }
    }) //type 自动转为 html
    });
    注意:第四参数 type 是指定异步返回的类型。一般情况下 type 参数是智能判断,并不
    需要我们主动设置,如果主动设置,则会强行按照指定类型格式返回。
    //使用$.get()异步返回 xml
    $('input').click(function () {
    $.get('test.xml', function (response, status, xhr) {
    $('#box').html($(response).find('root').find('url').text());
    }); //type 自动转为 xml
    });
    注意:如果载入的是 xml 文件,type 会智能判断。如果强行设置 html 类型返回,则会
    把 xml 文件当成普通数据全部返回,而不会按照 xml 格式解析数据。
    //使用$.get()异步返回 json
    $.get('test.json', function (response, status, xhr) {
    alert(response[0].url);
    });
    $.post()方法的使用和$.get()基本上一致,他们之间的区别也比较隐晦,基本都是背后的
    不同,在用户使用上体现不出。具体区别如下:
    1.GET 请求是通过 URL 提交的,而 POST 请求则是 HTTP 消息实体提交的;
    2.GET 提交有大小限制(2KB),而 POST 方式不受限制;
    3.GET 方式会被缓存下来,可能有安全性问题,而 POST 没有这个问题;
    4.GET 方式通过$_GET[]获取,POST 方式通过$_POST[]获取。
    //使用$.post()异步返回 html
    $.post('test.php', {
    url : 'ycku'
    }, function (response, status, xhr) {
    $('#box').html(response);
    });
    四.$.getScript() 和$.getJSON()
    jQuery 提供了一组用于特定异步加载的方法:$.getScript(),用于加载特定的 JS 文件;
    $.getJSON(),用于专门加载 JSON 文件。
    有时我们希望能够特定的情况再加载 JS 文件,而不是一开始把所有 JS 文件都加载了,
    这时课时使用$.getScript()方法。
    //点击按钮后再加载 JS 文件
    $('input').click(function () {
    $.getScript('test.js');
    });
    $.getJSON()方法是专门用于加载 JSON 文件的,使用方法和之前的类似。
    $('input').click(function () {
    $.getJSON('test.json', function (response, status, xhr) {
    alert(response[0].url);
    });
    });

  • 相关阅读:
    vue 中 过滤filter 和 foreach的使用
    vuex 获取数据
    动态设置样式 calc计算
    vue-echarts-v3 使用 dataZoom属性 相关笔记
    访存加速-Speed-up of Memory Access Intensive Program
    台式机新添内存条无法开机?
    ADB的版本问题
    1184. Distance Between Bus Stops
    485. Max Consecutive Ones
    448. Find All Numbers Disappeared in an Array
  • 原文地址:https://www.cnblogs.com/keyi/p/5910001.html
Copyright © 2011-2022 走看看