深入理解jQuery AJAX与load方法的应用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_27154991/article/details/50993219

jquery的ajax操作大大简化了js的ajax操作，并且解决了跨浏览器兼容等问题。因此学好jquery-ajax是非常必要的。

1.load方法

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

url:待装入 HTML 网页网址，jsp页面也是ok的。
data:发送至服务器的 key/value 数据。在jQuery 1.3+中也可以接受一个字符串了。
callback:载入成功时回调函数。

也就是说，load的方法是把一个页面加载到你想放的DOM位置。

举个香甜的栗子：
jquery:

<script type="text/javascript" src="jquery.js"></script>

html:

<body>
    <button id="button">load</button>
    <div id="right"></div>
</body>

css:

    <style type="text/css">

        #right{
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>

页面预览：

这里写图片描述

js: 使用load方法加载一个远程html

<script type="text/javascript">
        $(function() {
            //为button添加点击事件
            $("#button").click(function(){
                //为哪个div加载事件
                $("#right").load("data.jsp");
            });
        });
</script>

点击按钮加载远程html到指定DOM中

data.jsp:

<body>

   <table>
    <thead>
        <tr>
            <td>id</td>
            <td>姓名</td>
            <td>性别</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01</td>
            <td>小张</td>
            <td>女</td>
        </tr>
    </tbody>
   </table>


  </body>