zoukankan      html  css  js  c++  java
  • jQuery学习之三AJAX和jQuery

    1、使用 $(selector).load(url) 来改变 HTML 内容

    View Code
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title>使用 $(selector).load(url) 来改变 HTML 内容。</title>
     5     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     6     <script type="text/javascript">
     7         $(document).ready(function () {
     8             $("#b01").click(function () {
     9                 $("#myDiv").load("test.txt");
    10             });
    11         });
    12     </script>
    13 </head>
    14 <body>
    15     <div id="myDiv">
    16         <h2>
    17             通过 AJAX 改变文本</h2>
    18     </div>
    19     <button id="b01" type="button">
    20         改变内容</button>
    21 </body>
    22 </html>

    2、使用 $.ajax(options) 来改变 HTML 内容

    View Code
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title>使用ajax来给边html的内容</title>
     5     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     6     <script type="text/javascript">
     7         $(document).ready(function () {
     8             $("#b01").click(function () {
     9                 htmlobj = $.ajax({ url: "test.txt",async: false });
    10                 $("#myDiv").html(htmlobj.responseText);
    11                 
    12             });
    13         });
    14     </script>
    15 </head>
    16 <body>
    17     <div id="myDiv">
    18         <h2>
    19             通过 AJAX 改变文本</h2>
    20     </div>
    21     <button id="b01" type="button">
    22         改变内容</button>
    23 </body>
    24 </html>

     

  • 相关阅读:
    return和yield的区别
    基本装饰器
    javascript实例:两种方式实现tab栏选项卡
    javascript实例:路由的跳转
    javascript实例:点亮灯泡
    标签页QTabWidget
    主窗口QMainWindow和启动画面
    各种对话框
    列表视图QlistView
    拆分窗口QSplitter
  • 原文地址:https://www.cnblogs.com/caishuhua226/p/2480613.html
Copyright © 2011-2022 走看看