16.jquery ajax与html

来源：互联网发布：windows 10碎片整理编辑：程序博客网时间：2024/04/30 06:06

index.html：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            ul {                font-size: 16pt;            }        </style>        <script src="../../js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">            $(document).ready(function() {                $("a").click(function() {                    var url = $(this).text() + ".html";                    $("#detail").load(url);                });            });        </script>    </head>    <body>        <p>点击对应会显示详细信息,ajax请求服务器上的数据，将详细信息显示在下方</p>        <ul>            <li>                <a id="aaa">AAA</a>            </li>            <li>                <a id="bbb">BBB</a>            </li>            <li>                <a id="ccc">CCC</a>            </li>        </ul>        <div id="detail"></div>    </body></html>

AAA.html:

<h2>AAA</h2><p>email:AAA@gmail.com</p>

BBB.html:

<h2>BBB</h2><p>email:BBB@gmail.com</p>

CCC.html:

<h2>CCC</h2><p>email:CCC@gmail.com</p>

0 0