回顾Ajax

最新推荐文章于 2024-07-21 17:58:14 发布

iy6c3101

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量87

点赞数

分类专栏：前端 Springboot 文章标签： jquery ajax js html javascript

本文链接：https://blog.csdn.net/iy6c3101/article/details/108706238

版权

Springboot 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

回顾Ajax

最近在学习后端中间件，对前端知识有所遗忘，所以今天来复习以下使用AJax实现简单的前后端分离。

又想起了被跨域折腾疯的日子

使用Ajax可以实现简单的前后端分离，下面给出一个简单的小demo来复习一下Ajax的简单使用。

需求：有一个文本框，在鼠标对其失去焦点后判断文本框中的值是否与某个值相等

步骤

将文本框接收的值返回给服务器
服务器对值进行验证得出结果
将结果发送回前端

因为需要交互，所以控制器需要两个参数，一个是响应参数，一个是字符串参数

@Controller
@RequestMapping("/ajax")
public class AjaxController {
    @RequestMapping(value = "/a1",method = {RequestMethod.POST})
    public void ajax(String name, HttpServletResponse httpServletResponse) throws IOException {
        if("admin".equals(name)){
            httpServletResponse.getWriter().print(true);
        }else{
            httpServletResponse.getWriter().print(false);
        }
    }

需要进行前后端分离，所以前端使用html进行编写。需要引入JQuery。在Ajaxd中需要设置一些参数，我这里设置了请求方式，url等等，如果需要配置跨域，除了在后端中设置注解外，在此处也应该进行配置。

<body>
    <script type="text/javascript">
        function a1() {
            $.ajax({
                type:"POST",
                url:"http://localhost:8080/ajax/a1",
                data: {"name":$("#txtName").val()},
                success:function (data,status) {
                    alert(data);
                    alert(status);
                }
            });
        }
    </script>
    <!--失去焦点事件-->
    用户名：<input type="text" id="txtName" onblur="a1()">
</body>

结果

试验成功

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9CXXUeFw-1600660234591)(C:\Users\oroch\Pictures\mds\前端\1.png)]$

iy6c3101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
回顾Ajax

回顾Ajax最近在学习后端中间件，对前端知识有所遗忘，所以今天来复习以下使用AJax实现简单的前后端分离。又想起了被跨域折腾疯的日子使用Ajax可以实现简单的前后端分离，下面给出一个简单的小demo来复习一下Ajax的简单使用。需求：有一个文本框，在鼠标对其失去焦点后判断文本框中的值是否与某个值相等步骤将文本框接收的值返回给服务器服务器对值进行验证得出结果将结果发送回前端因为需要交互，所以控制器需要两个参数，一个是响应参数，一个是字符串参数@Controller@Request
复制链接

扫一扫

专栏目录