Ajax前端

最新推荐文章于 2024-01-12 16:08:17 发布

Richard-roop

最新推荐文章于 2024-01-12 16:08:17 发布

阅读量167

点赞数 1

分类专栏： JavaWeb 文章标签： ajax js java vue

本文链接：https://blog.csdn.net/weixin_45567738/article/details/114096894

版权

JavaWeb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Ajax

AJAX =Asynchronous JavaScript and XML （异步的JavaScript和XML）

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

AJAX不是一种新的语言，而是一种用于创建更好以及交互性更强的web应用程序的技术

传统的网页（即不用ajax技术的网页），想要更新内容或者提交一个表单，都需要重新加载整个网页。使用ajax技术的网页，通过在后台服务进行少量的数据交换，就可以实现局部异步更新。使用ajax，用户可以创建接近本地桌面应用的直接，高可用，更丰富，更动态的web用户界面。

C/S

增加B/S的体验性

B/S:未来的主流，并且爆发式的持续增长。

产品链：H5+网页+客户端+手机端（Android+ios）+小程序

使用JQuery需要先导入jQuery的js文件；

利用ajax可以做什么：

注册时：输入用户名自动检测用户是否已经存在、
登陆时，提示用户密码错误
删除数据行，将行id发送到后台，后台在数据库中删除，数据库删除成功后，在页面dom中将数据行也删除。

伪造ajax

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

<script type="text/javascript">
   window.onload =  function f() {
        var myDate = new Date();
        document.getElementById("currentTime").innerText = myDate.getTime();
    }
    function loadPage() {
        var targetURL = document.getElementById('url').value;
        console.log(targetURL);
        document.getElementById("iframePosition").src = targetURL;
    }
</script>

<div>
    <p>请输入要加载的地址：<span id="currentTime"></span></p>
    <p>
        <input type="text" id="url" value="">
        <input type="button" value="提交" onclick="loadPage()">
    </p>
</div>
<div>
   <h3>
       加载页面位置：
   </h3>
    <iframe style="width: 100%;height: 500px;" id="iframePosition">

    </iframe>
</div>
</body>
</html>

使用JQuery需要先导入JQuery的文件

Copy@Controller
@RequestMapping("/ajax")
public class AjaxController{
    //第一种方式，服务器要返回一个字符串，直接使用response
    @RequestMapping("/a1")
    public void ajax(String name,HttpServletResponse response){
        if("admin".equals(name)){
            response.getWriter().print("true");
        }else{
            response.getWriter().print("false");
        }
    }
}

@RequestMapping("/a2")
@ResponseBody
public List<User> ajax2(){
    List<User> list =new ArrayList<>();
    User user1 =new User("豪",1,"男");
    User user2=new User("豪",1,"男");
    list.add(user1);
    list.add(user2);
    return list; //由于加了@ResponseBody注解，他会返回一个字符串
}

ajax 写法

Copy<script type="text/javascript">
    function a1() {
        //所有参数：
        //url:待载入页面的URL地址，Json
        //data:待发送Key/value参数
        //success:载入成功时回调函数
        //data：封装了服务器返回的数据
        //status：状态
        $.ajax({
            url:"${pageContext.request.contextPath}/ajax/a1",
            data:{"name":$("txtName").val()},
            success:function (data,status) {
                console.log(data)
                console.log(status)
            }
        });
        //将文本输入的值，
        $("txtName").val();
        // //发送给服务器，
        // //接受服务器返回的数据
    }
Copy<script>
    $(function(){
        $("#btn").click(function(){
            $.post("${pageContest.request.contextPath}/ajax/a2",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>

第三种

Copy@RequestMapping("/a3")
@ResponseBody
public String ajax3(String name,String pwd){
    String msg="";
    if(name!=null){
        if("admin".equals(name)){
            msg="ok";
        }else{
            msg="用户名有误"；
        }
    }
    if(pwd != null){
        if("123456".equals(pwd)){
            msg="ok";
        }else{
            msg="密码输入有误";
        }
            
    }
    return msg;
}
Copy<html>
    <head>
        <title>Title</title>
        <script>
            function a1(){
                $.post({
                    url:"${pageContext.request.contextPath}/ajax/a3",
                    data:{"name":$("#name").val()},
                    success:function(data){
                        if(data.toString()=='ok'){
                            //信息核对成功
                            $('#userInfo').css("color","green");
                        }else{
                            $("#userInfo").css("color","red");
                        }
                        $("#userInfo").html(data);
                    }
                })
            }
            function a2(){
                $.post("${pageContext.request.contextPath}/ajax/a3",{"pwd":$("pwd").val()},function(data){
                    if(data.toString()='ok'){//信息核对成功
                        $('#pwdInfo').css("color","green");                     
                    }else{
                        $('#pwdInfo').css("color","red");
                    }
                    $("#pwdInfo").html(data);
                })
            }
        </script>
    </head>
    <body>
        <p>
            用户名：
            <input type="text" id="name" οnblur="a1()"/>
            <span id="userInfo"></span>
        </p>
        <p>
                密码：
            <input type="text" id="pwd" οnblur="a2()"/>
            <span id="pwdInfo"></span>
            
        </p>   
        
    </body>
</html>

Ajax 总结：

使用jQuery需要导入JQuery，使用Vue就导入Vue，两个都用，自己原生态实现

三步曲：

1.编写对应处理的Controller,返回消息或者字符串汇总json格式的数据

2.编写ajax请求

1.url: Controller 请求

2.data：键值对

3 . SUCCESS: 回调函数

3.给Ajax绑定事件，点击click，失去焦点onblur,键盘弹起keyup

Richard-roop

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax前端

AjaxAJAX =Asynchronous JavaScript and XML （异步的JavaScript和XML）AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术AJAX不是一种新的语言，而是一种用于创建更好以及交互性更强的web应用程序的技术传统的网页（即不用ajax技术的网页），想要更新内容或者提交一个表单，都需要重新加载整个网页。使用ajax技术的网页，通过在后台服务进行少量的数据交换，就可以实现局部异步更新。使用ajax，用户可以创建接近本地桌面应用的直
复制链接

扫一扫