javascript入门 之 Ajax（一） 

1.在项目的根目录下创建data目录，data目录下创建info文件,编写info文件如下代码:

<h1>all data<h2>
<p>this is the data of the p sign</p>

 

 2.在index.html文件中编写如何代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta lang="zh">
    <script src="js/jquery-3.3.1.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $('#test').load('data/info',function (responseTxt,statusTxt,xhr) {

                    if(statusTxt == "success")

                        alert("内容加载成功！");

                    if(statusTxt == "error")

                        alert("Error: "+xhr.status+": "+xhr.statusText);
                });
            });

            $("#btn2").click(function () {
                $("#test").load('data/info p',function (responseTxt,statusTxt,xhr) {

                    if(statusTxt == "success")

                        alert("内容加载成功！");

                    if(statusTxt == "error")

                        alert("Error: "+xhr.status+": "+xhr.statusText);
                })
            });
        })
    </script>
</head>

<body>

<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获取全部内容</button>
<button id="btn2" type="button">获取p标签内容</button>

</body>
</html>
posted @ 2018-08-02 17:28  IT蓝月  阅读(104)  评论(0)    收藏  举报
Live2D