首页 > 其他分享 >jQuery与Ajax:“特别的”load()方法(筛选文档、传递方法、回调函数)

jQuery与Ajax:“特别的”load()方法(筛选文档、传递方法、回调函数)

时间:2023-09-17 23:02:15浏览次数:46  
标签:jQuery load 请求 URL resText Ajax function

“大名鼎鼎的”jQuery因为其极简的引用方式而在N年前备受追捧,而今“浪潮”过去,还剩下什么? 我认识jQuery,只是在去年接触ajax时了解,从而感兴趣,进而深入探究(其实也没多深入,只是相关的看了一下)。不得不说,jQuery对ajax支持的四个type:post(一般用于发送)、get(一般常用于接收)、put(修改)、delete(删除) 令我非常震撼,太**实用了。 这其中,post和get是最常用的(因为好像说不是所有的浏览器都支持put和delete),具体的我在 这篇文章 中以JS方式提到,这里不再赘述。

load()

load()方法时jQuery中操作上最为简单的Ajax方法,能载入其他的HTML代码并插入到DOM中。其基本格式为:

load(url [,data] [,callback])

参数意义:

  1. url: String类型,请求HTML页面的URL地址
  2. data(可选): Object类型,发送至服务器的key/value数据
  3. callback(可选): Function,请求完成时的回调函数,无论请求成功或失败

为什么说它是“特别的”呢?因为它只用于文档流(html)的操作,而且,既可以是get操作,又可以是post操作:

基本示例:

//如果是jsp代码,这里要加一行:
// <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>请求的文件</title>
</head>
<body>
    <div class="comment">
        <h6>张三:</h6>
        <p class="para">沙发</p>
    </div>
    <div class="comment">
        <h6>李四:</h6>
        <p class="para">板凳</p>
    </div>
    <div class="comment">
        <h6>王五:</h6>
        <p class="para">地板</p>
    </div>
</body>
</html>
//如果是jsp代码,这里要加一行:
//<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>发送ajax的文件</title>
    <script src="js/jquery-2.1.0.js" type="text/javascript"></script>
    //如果是jsp代码,上面这一行要换成:<script src="<%=request.getContextPath()%>/js/jquery-2.1.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#send").on("click", function () {
                $("#resText").load("test.jsp");
            });
        });
    </script>
</head>
<body>
    <input type="button" id="send" value="Ajax获取">
    <div class="comment">已有评论:</div>
    <div id="resText"></div>
</body>
</html>

上面是“载入文档”,它还可以“筛选载入的文档”: 如果只需要加载某页面内的某些元素,那么可以使用load()方法的URL参数来达到目的。通过为 URL参数 指定选择符,就可以很方便地从加载过来的HTML文档里筛选出所需要的内容。

load()方法的URL参数的语法结构为:“url selector”。注意,URL和选择器之间有一个空格:

$(function () {
    $("#send").on("click", function () {
        $("#resText").load("test.html .para");
    });
});

传递方式: load()方法的传递方式根据 参数data 来自动指定。如果没有参数传递,则采用GET方式传递;反之,则会自动转换为POST方式:

//无参数传递,GET方式
 $("#resText").load("test.html .para", function(){
	//....
});
//有参数传递,POST方式
 $("#resText").load("test.html .para",{name:"tom", age:"18}, function(){
	//....
});

回调函数: 对于必须在加载完成后才能继续的操作,load()方法提供了 回调函数 ,该函数 有3个参数分别代表请求返回的内容、请求状态和XMLHttpRequest对象 ,jQuery代码如下:

$("#resText").load("test.html", function(responseText, textStatus, XMLHttpRequest){
	//responseText:请求返回的内容——等同于js-ajax时的“得到服务器响应的文本格式的内容”(注意:js操作中的get、post...都在open()中规定)
	//textStatus:请求状态:success、error、notmodified、timeout4种
	//XMLHttpRequest:XMLHttpRequest对象——这玩意一般用在判断浏览器适用类型上
});
//注意:在load()方法中,无论Ajax请求是否成功,只要请求完成(complete)后,回调函数就被触发。

标签:jQuery,load,请求,URL,resText,Ajax,function
From: https://blog.51cto.com/u_15296224/7504154

相关文章

  • DVWA靶场通关-File Upload(文件上传)
    BruteForce(暴力(破解))、CommandInjection(命令行注入)、CSRF(跨站请求伪造)、     FileInclusion(文件包含)、FileUpload(文件上传)、InsecureCAPTCHA(不安全的验证码)、    SQLInjection(SQL注入)、SQLInjection(Blind)(SQL盲注)、XSS(DOM)(基于DOM树)、    XSS(Reflec......
  • keepalived 报错/usr/sbin/keepalived: error while loading shared libraries: /lib6
    yuminstallkeepalived的时候提示需要一下包Installing: keepalived                                        x86_64                               1.3.5-19.el7               ......
  • K8S你学废了么5——Secret与downloadAPI
    一、背景介绍前面介绍的k8s中的pv存储卷与cm存储卷,k8s中还有2中特殊的存储卷:secret和downloadAPI。其作用分别是用来存放敏感信息和将pod中的信息暴漏给pod中运行的代码,这也是k8s中经常会用到的两个存储卷,下面就这两个存储卷展开详细说明。二、Secret存储卷尽管configMap资源也可以......
  • Jquery设置select控件指定text的值为选中项
    北环路天河路清华园路徐寨路朝凤路园田路varstreet=‘清华园路’;(‘#streetidoption:contains(’+street+‘)’).each(function(){if((this).text()==street){$(this).attr(‘selected’,true);}});......
  • tomcat里web.xml中load-on-startup参数含义
    原文:Theload-on-startupelementindicatesthatthisservletshouldbeloaded(instantiatedandhaveitsinit()called)onthestartupofthewebapplication.Theoptionalcontentsoftheseelementmustbeanintegerindicatingtheorderinwhichtheserv......
  • jquery设置图片可手动拖拽
    JQuery是一款流行的JavaScript框架,可以轻松实现网页交互效果。而其中一种常见效果是图片手动拖拽。以下是设置图片手动拖拽的JQuery代码。$(document).ready(function(){varisDragging=false;varmousePos={x:0,y:0};varelemPos={x:0,y:0};var$elem=$......
  • 缩略图upload
    <el-uploadaction="https://jsonplaceholder.typicode.com/posts/"list-type="picture-card":on-preview="handlePictureCardPreview":on-remove="handleRemove"><iclass="el-icon-plus"><......
  • el-upload file转blob 用于预览pdf.js和下载文件
    //file转blobfileToBlob(file,callback){consttype=file.type;constreader=newFileReader();reader.onload=(evt)=>{constblob=newBlob([evt.target.result],{type});if(typeofcallback==="f......
  • Loadrunner发生请求的body中文实际是乱码的解决方法
    Loadrunner发生的json请求中,包含有中文。回放脚本,实际发送出去的body不是中文,而是乱码,这就导致请求不正确,影响测试的实际结果。要解决这个问题,先要把中文使用函数lr_convert_string_encoding转换一下,再在请求中引用该转换后的参数,回放的请求数据正常。示例如下:lr_convert_str......
  • uploads-lab2
    源代码:$is_upload=false;$msg=null;if(isset($_POST['submit'])){if(file_exists(UPLOAD_PATH)){if(($_FILES['upload_file']['type']=='image/jpeg')||($_FILES['upload_file']['type�......