<filter-name>encoding</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> </filter> <filter-mapping> <filter-name>encoding</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
@H_404_7@`applicationContext.xml`:记得加 **静态资源过滤** 和 **注解驱动配置**。
@H_404_7@ <?xml version="1.0" encoding="UTF-8"?><beans xmlns=“http://www.springframework.org/schema/beans”
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd"> <!-- 自动扫描包,让指定包下的注解生效,由IOC容器统一管理 --> <context:component-scan base-package="com.yuSAEl.controller"/> <!--静态资源过滤--> <mvc:default-servlet-handler/> <!--注解驱动配置--> <mvc:annotation-driven/> <!-- 视图解析器 --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver"> <!-- 前缀 --> <property name="prefix" value="/WEB-INF/jsp/" /> <!-- 后缀 --> <property name="suffix" value=".jsp" /> </bean>
@H_404_7@编写一个 `AjaxController`:
@H_404_7@@RestController
public class AjaxController {
@RequestMapping("/ajax1") public void ajax1(String name, HttpServletResponse response) throws IOException { if ("admin".equals(name)) { response.getWriter().write("true"); } else { response.getWriter().write("false"); } }
@H_404_7@}
编写 `index.jsp` 测试:
@H_404_7@<%@ page contentType=“text/html;charset=UTF-8” language=“java” %>
<title>Ajax测试</title> <script src="${pageContext.request.contextpath}/statics/js/jquery-3.4.1.min.js"></script> <script> function a1() { $.ajax({ url : "${pageContext.request.contextpath}/ajax1", data : {'name' : $("#username").val()}, success : function(data, status) { alert(data); alert(status); }, error : function () {} }); } </script>
@H_404_7@<%--onblur:失去焦点触发事件--%> 用户名: <input type="text" id="username" onblur="a1()">
@H_404_7@ []( )Ajax 执行流程 ----------------------------------------------------------------------------  []( )Ajax 异步加载数据案例 ================================================================================ 首先写一个实体类 `User`:
@H_404_7@@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private String name; private int age; private String sex;
@H_404_7@}
在 Controller 中获取一个集合对象,展示到前端页面:
@H_404_7@@RequestMapping("/ajax2")
public List ajax2() {
List<User> list = new ArrayList<>(); list.add(new User("zhenyu", 21, "男")); list.add(new User("yuSAEl", 99, "男")); list.add(new User("hahaha", 18, "女")); return list; // 由于@RestController注解, 将list转成json格式返回
@H_404_7@}
前端页面:`ajaxtest.jsp`
@H_404_7@<%@ page contentType=“text/html;charset=UTF-8” language=“java” %>
<Meta charset="UTF-8"> <title>Ajax测试</title>
@H_404_7@<tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tbody id="content"></tbody>
@H_404_7@
 []( )Ajax 验证用户名密码 =============================================================================== 思考一下:我们平时登录时,输入框后面的实时提示是怎么做到的? `Controller`:
@H_404_7@@RequestMapping("/ajax3")
public String ahax3(String name, String pwd) {
String msg = ""; if (name != null) { if ("admin".equals(name)) { msg = "OK"; } else { msg = "用户名有误!"; } } if (pwd != null) { if ("123456".equals(pwd)) { msg = "OK"; } else { msg = "密码输入有误!"; } } return msg;
@H_404_7@}
前端页面 `login.jsp`:
@H_404_7@<%@ page contentType=“text/html;charset=UTF-8” language=“java” %>
<title>Login</title> <script src="${pageContext.request.contextpath}/statics/js/jquery-3.4.1.min.js"></script> <script> function a1() { $.post({ url : "${pageContext.request.contextpath}/ajax3", data : {'name' : $("#name").val()}, success : function (data) { if (data.toString() === 'OK') { $("#userInfo").css("color", "green"); } else { $("#userInfo").css("color", "red"); } $("#userInfo").html(data); } }); } function a2() { $.post("${pageContext.request.contextpath}/ajax3", {'pwd' : $("#pwd").val()}, function (data) { if (data.toString() === "OK") { $("#pwdInfo").css("color", "green"); } else { $("#pwdInfo").css("color", "red"); } $("#pwdInfo").html(data); }); } </script>
@H_404_7@用户名:
<span id="userInfo"></span>
@H_404_7@密码: <input type="text" id="pwd" onblur="a2()"> <span id="pwdInfo"></span>
@H_404_7@注:记得处理 JSON 乱码! `applicationContext.xml` 中加入以下代码:
@H_404_7@mvc:annotation-driven
<mvc:message-converters register-defaults="true"> <bean class="org.springframework.http.converter.StringHttpMessageConverter"> <constructor-arg value="UTF-8"/> </bean> <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"> <property name="objectMapper"> <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperfactorybean"> <property name="failOnEmptyBeans" value="false"/> </bean> </property> </bean> </mvc:message-converters>
@H_404_7@</mvc:annotation-driven>
  []( )获取 百度 接口案例 ============================================================================= 
@H_404_7@<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JSONP百度搜索</title> <style> #q{ width: 500px; height: 30px; border:1px solid #ddd; line-height: 30px; display: block; margin: 0 auto; padding: 0 10px; font-size: 14px; } #ul{ width: 520px; list-style: none; margin: 0 auto; padding: 0; border:1px solid #ddd; margin-top: -1px; display: none; } #ul li{ line-height: 30px; padding: 0 10px; } #ul li:hover{ background-color: #f60; color: #fff; } </style> <script> // 2.步骤二 // 定义demo函数 (分析接口、数据) function demo(data){ var Ul = document.getElementById('ul'); var html = ''; // 如果搜索数据存在 把内容添加进去 if (data.s.length) { // 隐藏掉的ul显示出来 Ul.style.display = 'block'; // 搜索到的数据循环追加到li里 for(var i = 0;i<data.s.length;i++){ html += '<li>'+data.s[i]+'</li>'; } // 循环的li写入ul Ul.innerHTML = html; } } // 1.步骤一 window.onload = function(){ // 获取输入框和ul var Q = document.getElementById('q'); var Ul = document.getElementById('ul'); // 事件鼠标抬起时候 Q.onkeyup = function(){ // 如果输入框不等于空 if (this.value != '') { // ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆JSONPz重点☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ // 创建标签 var script = document.createElement('script'); //给定要跨域的地址 赋值给src //这里是要请求的跨域的地址 我写的是百度搜索的跨域地址
@H_404_7@完结
Redis基于内存,常用作于缓存的一种技术,并且Redis存储的方式是以key-value的形式。Redis是如今互联网技术架构中,使用最广泛的缓存,在工作中常常会使用到。Redis也是中高级后端工程师技术面试中,面试官最喜欢问的问题之一,因此作为Java开发者,Redis是我们必须要掌握的。
Redis 是 Nosql 数据库领域的佼佼者,如果你需要了解 Redis 是如何实现高并发、海量数据存储的,那么这份腾讯专家手敲《Redis源码日志笔记》将会是你的最佳选择。
抬起时候
Q.onkeyup = function(){ // 如果输入框不等于空 if (this.value != '') { // ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆JSONPz重点☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ // 创建标签 var script = document.createElement('script'); //给定要跨域的地址 赋值给src //这里是要请求的跨域的地址 我写的是百度搜索的跨域地址
@H_404_7@完结
Redis基于内存,常用作于缓存的一种技术,并且Redis存储的方式是以key-value的形式。Redis是如今互联网技术架构中,使用最广泛的缓存,在工作中常常会使用到。Redis也是中高级后端工程师技术面试中,面试官最喜欢问的问题之一,因此作为Java开发者,Redis是我们必须要掌握的。
Redis 是 Nosql 数据库领域的佼佼者,如果你需要了解 Redis 是如何实现高并发、海量数据存储的,那么这份腾讯专家手敲《Redis源码日志笔记》将会是你的最佳选择。
[外链图片转存中…(img-MCCaLdjX-1630666418307)]
CodeChina开源项目:【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频】
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。