JQuery实现Ajax（简单快速入门并实现）

使用ajax技术发送异步请求时候要先引入jquery这个插件库

1. $.ajax()   语法: $.ajax({键值对});
	//使用$ .ajax()发送异步请求
	$.ajax({
		url: "ajaxServlet1111"，//请求路径
		type: "POST"，//请求方式
		//data: "username=jack&age=23",//请求参数
		data:{"username":"jack" , " age" :23},
		success: function (data) {
			alert(data);
		},//响应成功后的回调函数
		contentType:"application/json;charset=utf-8",
		//设置接受的类型为json以及编码格式
		error :function () {
			alert("出错啦...") 
		},//表示如果请求响应出现错误,会执行的回调函数
		dataType: "json"//设置接受到的响应数据的格式
	});

		$.get() :发送get请求
		语法:$.get(url, [data], [callback], [type])
		
		参数:
		url :请求路径
		data :请求参数
		callback :回调函数
		type :响应结果的类型

简单示例：

//在页面加载完成后
    <script>
        $(function () {
            $("#inputEmail3").blur(function () {
                var username = $("#inputEmail3").val();
                $.ajax({
                    type:"GET",
                    data:{
                        username:username
                    },
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    url:"selectUserName2",
                    success:function (data) {
                        let le =data.msg;
                        let id = data.id;
                        if (id ==1){
                            $("#spand").html(le);
                            $("#spand").css("color","red");
                        }
                        if (id ==2){
                            $("#spand").html(le);
                            $("#spand").css("color","blue");
                        }

                    }

                })
            })

        });



    </script>

我们后端使用的是SpringBoot框架 我们直接采用Controller控制器来进行

    /**
     * 检测用户是否被注册
     * @param username
     * @return
     */
    @ResponseBody
    @GetMapping("/selectUserName2")
    public Object selectUserName2(@RequestParam("username") String username){
        User user = userService.selectByName(username);
        Message message = new Message();
        if (user != null){
            message.setId(1);
            message.setMsg("用户名可用，请更换后重新注册");
            return message;
        }else {
            message.setId(2);
            message.setMsg("用户名可用");
            return message;
        }
    }