Ajax学习

Ajax

  • 伪造Ajax
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪造Ajax</title>
</head>
<body>

<script>
   window.onload = function time() {
        var currentTime = new Date();
        document.getElementById('currentTime').innerText = currentTime.getTime();
    }

    function getPage() {
       var url = document.getElementById('url').value;
       document.getElementById('iframePosition').src = url;
    }
</script>
<div>
    <p>请输入加载网址：<span id="currentTime"></span></p>
    <p>
        <input type="text" id="url" value="https://www.bilibili.com/">
        <input type="button" value="提交" onclick="getPage()">
    </p>
    <div>
        <h2>加载页面：</h2>
        <iframe style="width: 100%;height: 500px" id="iframePosition"></iframe>
    </div>
</div>
</body>
</html>

image.png

AJAX示例

后端接口

@Controller
@RequestMapping("/ajax")
public class AjaxController {

    @RequestMapping("/a1")
    public void ajax(String name, HttpServletResponse response) throws IOException {
        if ("admin".equals(name))
            response.getWriter().print("true");
        else
            response.getWriter().print("false");
    }

    @RequestMapping("/a2")
    @ResponseBody
    public String ajax2(String name, String pwd){
        String msg = "";
        if (null != name)
        {
            if ("admin".equals(name))
                msg = "ok";
        }
        if (null != pwd)
        {
            if ("123456".equals(pwd))
                msg = "ok";
        }
        return msg;
    }
    @ResponseBody
    @RequestMapping("/a3")
    public List<User> ajax3(){
        User user1 = new User("张儒珂1号", 18, "男");
        User user2 = new User("张儒珂2号", 19, "男");
        User user3 = new User("张儒珂3号", 20, "男");
        List<User> list = new ArrayList<>();
        list.add(user1);
        list.add(user2);
        list.add(user3);
        return list;
    }

}

请求获取数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.js"></script>
</head>
<body>
<input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content"></tbody>
</table>

<script type="text/javascript">
     //$(function())等同于$(document).ready(function())，意思很简单，就是等页面加载完毕之后，才开始执行函数。
    $(function () {
        $("#btn").click(function () {
            $.post("/ajax/a3",function (data) {
                console.log(data);
                var html = "";
                for (var i = 0;i < data.length; i++){
                    html += "<tr>"
                    + "<td>" + data[i].name + "</td>"
                    + "<td>" + data[i].age + "</td>"
                    + "<td>" + data[i].sex + "</td>"
                    + "</tr>"
                }
                $("#content").html(html);
            })
        })

    })
</script>
</body>
</html>

image-20210521153524642.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.6.0.js"></script>
</head>
<body>
<script type="text/javascript">
function a2() {
    $.post({
        url:"/ajax/a2",
        data:{"name": $("#txtName").val()},
        success: function (data) {
            if (data.toString() == "ok" )
            {
                $("#back1").css("color","green");
            }
            else
            {
                $("#back1").css("color","red");
            }
            $("#back1").html(data);
        }
    })
}
function a3() {
    $.post({
        url:"/ajax/a2",
        data:{"pwd": $("#txtName2").val()},
        success: function (data) {
            if (data.toString() == "ok" )
            {
                $("#back2").css("color","green");
            }
            else
            {
                $("#back2").css("color","red");
            }
            $("#back2").html(data);
        }
    })
}

</script>
<p>
    用户名：
    <input type="text" id="txtName" onblur="a2()"/>
    <span id="back1"></span>
</p>
<p>
    密码：
    <input type="text" id="txtName2" onblur="a3()"/>
    <span id="back2"></span>
</p>
<body>
</body>
</html>

image-20210521153609111.png

posted @ 2021-05-21 15:47  零度以外的风景  阅读(47)  评论(0)    收藏  举报