Ajax在前端页面所书写的一些格式

 $.ajax({
                    // 编写json格式，设置属性和值
                    url:"user/testAjax",
                    contentType:"application/json;charset=UTF-8",
                    data:'{}', //里面是json数据例如
                     //data:'{"username":"hehe","password":"123","age":30}',
                    dataType:"json",
                    type:"post",
                    success:function(data){
                        // data服务器端响应的json的数据，进行解析
                       //可以进行打印也可以进行控制台输出
                       //例如 alert(data);
                    }
                });

Ajax在springboot集成的环境下的入门

在学习Ajax之前需要简单学习JQuery的知识,SSM和Spring boot框架知识

controller层的简单代码

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

jsp页面的代码

事件描述：因为这是一个jsp页面所以需要先把项目部署到服务器上才能打开，，当输入框失去焦点的时候触发getdata()函数，getdata()函数向服务器发送Ajax请求，服务器对请求进行响应，然后浏览器解析服务器相应的数据(大多数情况下是解析服务器相应的json数据)

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>one</title>
    <%--注意路径问题--%>
    <script src="js/jquery-3.3.1.js">
    </script>
    <script  type="text/javascript">

        function getData() {
            //所有参数
            //url：待载入页面的URL地址，json
            //data：待发送key/value 参数
            //success：
            $.ajax({
                url: '${pageContext.request.contextPath}/ajax/ai',
                data: {"name":$("#username").val()},
                success: function (data) {
                    console.log(data);

                }
            });
            //将文本框输入的值
            //发给服务器

            //接收服务器返回的值
        }
    </script>
</head>
<body>
<%--注意路径问题--%>

<%--失去焦点进行访问服务器--%>
用户名：<input type="text" id="username" onblur="getData()" />
</body>
</html>

易错点分析

导入jquery库时的路径问题

%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.min.js">
    </script>
</head>
<body>
</body>

注意script的src一定要写在head标签里面，并且我的目录布局是这样的
包目录以及相对路径的描述
有视频说在相对路径之前加入${pageContext.request.contextPath}来获取，但是总是失败，识别不了，不知道为什么！

Ajax输入格式中待载入的URL地址

  $.ajax({
                url: '${pageContext.request.contextPath}/ajax/ai',
                data: {"name":$("#username").val()},
                success: function (data) {
                    console.log(data);

                }
            });

其中“/ajax/ai"是controller中的地址，使用${pageContext.request.contextPath}
是取出部署的应用程序名或者是当前的项目名称。

MarkZQP

发布了3 篇原创文章 · 获赞 0 · 访问量 92

私信关注

Ajax入门应用

Ajax的简单入门应用