jquery load 的高级应用

最新推荐文章于 2022-09-01 23:48:27 发布

xiawu1990

最新推荐文章于 2022-09-01 23:48:27 发布

阅读量419

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.csdn.net/xiawu1990/article/details/52300496

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何利用jQuery的load方法加载本地HTML文件及JSON数据，并解析这些数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.运用load 载入公共文件（比如网页中的公共head.html, top.html）或者公用的 html 模块

比如base.html 中的内容

<div style="width:100px;height:100px">
    <p  id="#p1">这是公共部分2</p>
    <p  id="#p2">这是公共部分1</p>
<div>

在main.html 中引用base.html 内容如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的css 案例</title>
        <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/normalize/4.2.0/normalize.css"/>
        <link rel="stylesheet" type="text/css" href="css/main.css"/>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" src="js/script.js" ></script>
    </head>
    <body>
        <div id="id1" style="width:200px;height:200px">
        <div>
    </body>
    <script>
    //载入公用节点模板
        $(function(){
            $("#id1").load("base.html");
        });
    </script>
    <html>

通过load 方法加载本地的json 数据
比如 base.json 中的数据

{"id":"1","age":"18","name":"zhangshan"}

main.html中的内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的css 案例</title>
        <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/normalize/4.2.0/normalize.css"/>
        <link rel="stylesheet" type="text/css" href="css/main.css"/>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" src="js/script.js" ></script>
    </head>
    <body>
        <div id="id1" style="width:200px;height:200px"><div>
    </body>
    <script>
        $(function(){
            // 载入json 文件
            $("#id1").load("base.json",function(responseTxt,statusTxt,xhr){
                // 获取json数据
                  if(statusTxt=="success")
                     $json=$("#id1").text();
                     $obj=$.parseJSON($json);
                     $.each($obj,function(key,value){
                        alert("key-"+key+"  value-"+value);
                     });

                    if(statusTxt=="error")
                      alert("Error: "+xhr.status+": "+xhr.statusText);
                  });
            });
    </script>
    <html>