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>

猜你喜欢

转载自blog.csdn.net/ITlanyue/article/details/81364303