企业官网建设流程全解析

需要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>