(狂神)SpringMVC笔记--------07

Ajax初体验

我们新建一个项目。我们新建一个web项目第一步肯定是要先配置好web.xml中的内容：

 

我们在web.xml中加载我们的ssm文件，并且配置乱码过滤器。

我们第二步就是去完成web.xml中加载的springmvc的文件的内容，我们直接从以前的项目中复制粘贴过来即可：

 

 

我们这里不需要用到json，所以我们可以把springmvc文件化简为：

 

因为springmvc文件扫描controller层所以我们去创建controller层 ：

我们先去在controller层写一个测试代码，我们去测试我们的环境是否可以正常启动，不然如果不测试，后期出错我们可能会花大量时间去调试我们的项目配置问题。

写完测试代码，去配置tomcat;

启动下项目：

 

我们发现可以成功启动项目，说明我们打框架搭起来没什么问题，接下来我们去写内容就好办多了。

除了ajax，我们html原生的iframe标签也可以做到异步刷新，我们先先去用这个标签去体会一下：

 

我们去运行一下这个html文件：

我们点击提交按钮：

 

我们发现我们输入拼多多的网址，去加载出来iframe中的页面内容时，我们的总地址栏的地址并没有发生变化。这就是异步刷新的感觉。 

我们大多数是用jQuery去做，jQuery它不是框架，它是一个库，用来 存放大量的js函数。

我们先要去找到jquery的.js包去加载到我们的项目中去：

 然后我们看看如何用jquery去调用我们的Ajax：

我们想完成的效果就是每次我们点击都会出现一个network。焦点一旦获得或者文本框内容一旦发生改变，我们都会产生一个事件。

因为我们这里用到js，所以我们必须在我们的springmvc文件中加入静态资源过滤代码：

 每一个开发web的操作都会过滤静态资源。

我们修改我们的index.jsp页面用于使用ajax:

我们点击一个输入框输入用户名，失去焦点触发方法a()，在方法a中利用ajax的post方法去跳转到后端的a1请求，我们后端请求是好写的，随便写一个方法就可以：

 

我们把前端的值与后端的值做一个比较，最后把结果返回给data数据。当运行成功后success方法被自动调用弹出data值。

在运行之前我们要把我们的statics文件夹右键选择Mark Directory as Test Resource Root

不然会在前台报jquery 404错误

运行结果：

 我们看看这个过程的原理是怎么样的，我们用一个流程图去解释一下：

 

 如果是纯后端，前后端分离的任务时，我们只需要做的事是写一个请求，并以json串的形式返回给前端就可以了。

我们后端的方向：我们要精通html 略懂css 超级熟练js 因为后端可能以后也会经常去写jquery

js需要会的内容包括：

函数：闭包（）

Dom:

id,name,tag

create,remove

Bom:

window

document

Ajax把主动权交给了前端

Ajax异步加载数据

我们去写一个实体类：

 接下来我们在Controller中写一个方法，当我们请求过来的时候，我们的controller能够获取到我们的实体类。

我们去运行一下：

 

我们现在并没有实现异步加载数据，我们应该用ajax去把我们后端的值传到前端中去：

 我们先写一个前端页面：

先运行一下这个前端页面：

 

我们的前端页面写完大部分，我们接下来去把数据传过来。

 

 

我们运行一下这个页面：

 

我们现在已经能获取到后端传来的数据了，接下来我们要做的就是把数据显示到前端页面中：

我们去写ajax中的内容;

 

 

运行：

 

这样我们就完成异步加载数据了。

 

Ajax验证用户名体验

我们前端页面的大框就写好了，接下来我们去写请求：

 

 我们去完善前端页面：

 

 

我们记得要在mvc文件中加上json乱码配置，不然前台可能会产生乱码：

 

运行结果：