Ajax前后端数据交互实现及部分坑点

最新推荐文章于 2023-02-26 20:38:33 发布

海棠花开

最新推荐文章于 2023-02-26 20:38:33 发布

阅读量400

点赞数

分类专栏： javaweb 文章标签： ajax java springmvc

本文链接：https://blog.csdn.net/smallhc/article/details/104582696

版权

javaweb 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

各类后端技术汇总点这里

编写前端代码

这里用的是jquery提供的ajax，所以需要先导入jquery文件。
文件目录
导入方式如下：

 <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js" type="text/javascript">

这里由于是在springmvc的环境下写的，所以需要配置允许访问静态资源。在springmvc.xml中添加

    <!--全部放行-->
    <mvc:default-servlet-handler/>

目的是为了实现在浏览器文本框中输入账号以后，鼠标移开触发失去焦点事件。调用js中的方法：用ajax进行前后端数据交互后在浏览器中显示输入账号是否存在。
完整的代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function fun1() {
  			//这里用的是post方式访问的
            $.post({
            	//访问地址，对应后端Controller中的位置
                url:"${pageContext.request.contextPath}/demo1",
                //获取文本框中内容，以json方式发出去
                data:{"name":$("#name_id").val()},
                //后端成功返回值后，调用回调函数，修改界面内容
                success:function (data) {
                    if (data.toString() == "账号存在")
                        $("#nameInfo").css("color","green")
                    else
                        $("#nameInfo").css("color","red")
                    $("#nameInfo").html(data)
                 }
            })
        }
    </script>
</head>
<body>
账号：<input id="name_id" name="name" type="text" onblur="fun1()"/><span id="nameInfo"></span><br/>
</body>
</html>

编写后端代码

注意：在RequestMapping中要指定用 produces来指定返回值类型和返回值编码。由于我们这里返回的是字符串，如果不添加会返回中文乱码，显示？。当然也有其他的一些方式来设置编码。这里的注解如下：

    @RequestMapping(value = "/demo1", produces = "text/html;charset=UTF-8;")

完整代码：

package com.hhh.ajax;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@ResponseBody
public class AjaxTestController {
    @RequestMapping(value = "/demo1", produces = "text/html;charset=UTF-8;")
    public String demo1(String name ){
        String msg="";
        if (name!=null){
            System.out.println("name");
            //这里默认要输入存在的账号为aaa
            if ("aaa".equals(name)) {
                msg = "账号存在";
            }
            else {
                msg = "账号不存在";
            }
        }
        System.out.println(msg);
        return msg;
    }
}

结果展示

请求地址和页面如下：
在这里插入图片描述
输入aaa后，鼠标点击其他地方让文本框失去焦点

输入其他内容

海棠花开

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax前后端数据交互实现及部分坑点

各类后端技术汇总点这里编写前端代码这里用的是jquery提供的ajax，所以需要先导入jquery文件。导入方式如下： <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js" type="text/javascript">这里由于是在springmvc的环境下写的，所以需要配置允许访问静态资源...
复制链接

扫一扫

专栏目录