4.3jquery ajax

2024-01-14 12:04:28

需要引入的库文件

<script src="../js/jquery-1.11.3.min.js"></script> //获取任意文本 <script> $(document).ready(function(){ $("#btn1").click(function(){ $('#test').load('../js/demo_test.txt'); }) }) </script> <h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3> <button id="btn1" type="button">获得外部的内容</button> //返回数据+状态 <script> $(document).ready(function(){ $("button").click(function(){ $.get("../js/demo_test2.txt",function(data,status){ alert("数据：" + data + "\n状态：" + status); }); }); }); </script> <button>向页面发送 HTTP GET 请求，然后获得返回的结果</button> //ajax实现加载过程 <script> $(document).ready(function(){ $("#txt").ajaxStart(function(){ $("#wait").css("display","block"); }); $("#txt").ajaxComplete(function(){ $("#wait").css("display","none"); }); $("button").click(function(){ $("#txt").load("../js/demo_test3.txt"); }); }); </script> </head> <body> <div id="txt"><h2>通过 AJAX 改变文本</h2></div> <button>改变内容</button> <div id="wait" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;"> <img src='/i/demo_wait.gif' width="64" height="64" /> <br />加载中 ... </div> </body>