网硕互联帮助中心需要jQuery就导入，需要VUE就导入，两个都需要就自己实现生态
三部曲：
1. 编写对应处理的Controller，返回消息后者字符串或者JSON格式的数据
2. 编写Ajax
<1> url: Controller请求
<2>data: 键值对
<3> success ：回调函数
3.给Ajax绑定事件，如：点击事件click 失去焦点事件 onblur 键盘相关keydown keyup
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Ajax </title>
<%– jQUERY 需要自行导入 导入时注意路径问题–%>
<script src="${pageContext.request.contextPath}/js/jquery.min.js"/>
</head>
<body>
<h2>Hello World!</h2>
<%– onblur失去焦点–%>
用户名：<input type="text" id="txtName" onblur="a1()">
</body>
<script type="text/javascript">
function a1(){
// 参数
/*
url: 待载入页面的url地址 json
data： 待发送的key/ value参数 封装了服务器返回的数据
success: 载入成功时候回调的函数
*/
$.ajax({
// ajax，默认是get请求
url:"${pageContext.request.contextPath}/user/quick",
data:{"username":$("#txtName").val()},
success:function (data){
console.log(data);
console.log(status);
}
});
//使用post的话这么写
/*
$.post({
// ajax，默认是get请求
url:"${pageContext.request.contextPath}/user/quick",
data:{"name":$("txtName").val()},
success:function (data){
console.log(data);
console.log(status);
}
});
*/
// 将文本输出的值
$("txtName").val();
}
$(function (){
$.post("${pageContext.request.contextPath}/ajax/a2",function (data){
console.log(data);
let html = "";
for (let 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>
</html>
评论前必须登录！
注册