jQuery与Ajax:“特别的”load()方法(筛选文档、传递方法、回调函数) - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


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

2019-10-1 释然 前端及开发文章及欣赏


“大名鼎鼎的”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地址
data(可选): Object类型,发送至服务器的key/value数据
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)后,回调函数就被触发。
蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务。
标签: 帝皇彩票官网jQuery与Ajax:“特别的”load()方法(筛选文档、传递方法、回调函数) « 【一分钟阅读】关于组件化,我有一些小建议 | JS基础知识整理06-函数»


蓝蓝 http://www.bjhbys.com

  1. 2019年11月(3)
  2. 2019年10月(53)
  3. 2019年9月(48)
  4. 2019年8月(63)
  5. 2019年7月(59)
  6. 2019年6月(59)
  7. 2019年5月(31)
  8. 2019年4月(37)
  9. 2019年3月(43)
  10. 2019年2月(26)
  11. 2019年1月(45)
  12. 2018年12月(41)
  13. 帝皇彩票官网2018年11月(40)
  14. 2018年10月(29)
  15. 2018年9月(40)
  16. 2018年8月(87)
  17. 2018年7月(107)
  18. 帝皇彩票官网2018年6月(86)
  19. 2018年5月(110)
  20. 2018年4月(40)
  21. 2018年3月(35)
  22. 2017年8月(35)
  23. 2017年7月(45)
  24. 2017年6月(7)
  25. 2017年5月(27)
  26. 2017年4月(51)
  27. 2017年3月(70)
  28. 帝皇彩票官网2017年2月(65)
  29. 2017年1月(69)
  30. 2016年12月(55)
  31. 帝皇彩票官网2016年11月(111)
  32. 2016年10月(92)
  33. 2016年9月(53)
  34. 2016年8月(9)
  35. 2016年7月(4)
  36. 2016年6月(9)
  37. 2016年3月(19)
  38. 2016年2月(26)
  39. 2016年1月(30)
  40. 2015年12月(33)
  41. 帝皇彩票官网2015年11月(35)
  42. 2015年10月(46)
  43. 2015年9月(43)
  44. 2015年8月(40)
  45. 2015年7月(33)
  46. 2015年6月(46)
  47. 2015年5月(58)
  48. 2015年4月(70)
  49. 2015年3月(55)
  50. 2015年2月(17)
  51. 2015年1月(33)
  52. 2014年12月(21)
  53. 2014年11月(84)
  54. 2014年10月(94)
  55. 2014年9月(6)
  56. 2014年8月(1)
  57. 2014年7月(13)
  58. 2014年6月(66)
  59. 2014年5月(99)
  60. 2014年4月(88)
  61. 2014年3月(102)
  62. 2014年2月(68)
  63. 2014年1月(83)
  64. 2013年12月(106)
  65. 2013年11月(112)
  66. 2013年10月(61)
  67. 2013年9月(20)
  68. 2013年7月(13)
  69. 2013年6月(27)
  70. 2013年5月(48)
  71. 2013年4月(39)
  72. 2013年3月(8)
  73. 帝皇彩票官网2013年2月(20)
  74. 2013年1月(31)
  75. 2012年12月(33)
  76. 帝皇彩票官网2012年11月(31)
  77. 2012年10月(23)
  78. 2012年9月(8)
  79. 2012年7月(14)
  80. 2012年6月(15)
  81. 2012年5月(31)
  82. 2012年4月(24)
  83. 2012年2月(4)
  84. 2012年1月(8)
  85. 2011年12月(35)
  86. 2011年11月(32)
  87. 2011年10月(13)
  88. 2011年8月(1)
  89. 2011年6月(1)
订阅Rss
桔子彩票注册 吉利彩票开奖 吉利彩票登陆 湖北快3走势 桔子彩票开奖 桔子彩票平台 内蒙古快三走势图 大象彩票APP 快赢彩票 微信pk10机器人漏洞