jquery -ajax

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>

页面预览:

jquery -ajax_第1张图片

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>

ok,现在要点击按钮了~~
咔。
jquery -ajax_第2张图片

当然在js文件中,可以去掉按钮的click事件,在页面加载完毕之后就自定load远程html。

你可能感兴趣的:(jquery -ajax)