方法概述
- jQuery简化了Ajax开发过程,
- jQuery对Ajax做了大量的封装,
- 我们使用起来也较为方便,不需要去考虑浏览器兼容性。
- 对于封装的方式，jQuery 采用了三层封装:
- 最底层的封装方法为: $.ajax( ),
- 而通过这层封装了第二层有三种方法:
- .load()、$.get()和$.post(),
- 最高层是$.getScript(和$.getJSON())方法。
load()方法
- 功能描述:载入远程HTML文件代码并插入到DOM中。
- 调用语法:load(url,[data],[callback])
- url(String):待装入HTML网页网址
- data(Map):(可选)发送至服务器的key/value数据
- callback(Callback):(可选)载入成功时回调函数
书写代码
JSON数据源
[ { "code":"10001", "name":"路人甲", "age":"18", "sex":"女" },{ "code":"10002", "name":"路人乙", "age":"19", "sex":"男" },{ "code":"10003", "name":"路人丙", "age":"20", "sex":"女" } ]HTML data页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://code.jquery.com/jquery-3.6.1.js"></script> <style> table th{ background-color: #ccc; border: solid 1px #000; } table{ border-collapse: collapse; border: solid 1px #000; text-align: center; } table td,th{ padding: 5px; } </style> </head> <table> <thead> <tr> <th>学号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> </tbody> </table> <script> $(function(){ $.getJSON("xml/data.json",function(res){ var data = res; for (var i = 0; i < data.length; i++) { var str=`<tr> <td>`+data[i].code+`</td> <td>`+data[i].name+`</td> <td>`+data[i].age+`</td> <td>`+data[i].sex+`</td> </tr>`; $("tbody").append(str); } }) }) </script> </html>HTMl index页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://code.jquery.com/jquery-3.6.1.js"></script> <script src="js/index.js"></script> <style> .con{ margin-top: 10px; } </style> </head> <body> <div class="content"> <div class="tip"> <button class="btu">测试</button> </div> <div class="con"> </div> </div> </body> </html>JS index.js
$(function(){ $(".btu").on("click",function(){ $(".con").load("data.html"); }) })效果展示
评论 (0)