ajax简介
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
ajax应用
在有些情况下我们既需要与服务器进行数据交互,但是又不能刷新网页,比如项目中在用户注册时验证用户的邮箱或者手机号是否已经注册,以及用户在输入用户名时验证改用户名是否已被占用。
ajax基础语法
我们的ajax代码是写在jq里的,所以首先要注意入口函数一定要写对(首先你还得有jq)
<script src = "jquery-3.0.0.js"></script>
<script>
$(
function(){
内容
}
)
</script>
一个简单的ajax代码如下
<script src = "jquery-3.0.0.js"></script>
<script>
$(
function () {
$("#button").click(
function () {
$.ajax(
{
url: "",//请求的地址
type: "",//请求的方式,get或者post
data: "",//请求的数据
success:function (data) {
//data 后台返回的数据
},//请求成功后执行的函数
error:function (error) {
//error 后台返回的错误数据
}//请求失败后执行的函数
}
)//创建ajax对象
}
)
}
)
</script>
案例
这里有一个简单的注册案例:用户只需要输入用户名和密码便可以完成注册,我们需要在用户输入用户名后验证改用户名是否已经存在,如果用户名已经存在则告知用户“”该用户名已存在,不允许注册”,如果用户名不存在则允许注册。
首先写一个简单的注册页面用于用户注册
在视图文件中定义(需要先建用于存储用户名和密码的数据库,这里不做过多描述)
在路由中指出
效果如下
当用户输入用户名后,我们要判断用户输入的用户名是否已经存在,这里就要用到ajax了
首先在视图文件中定义一个用于判断用户名是否存在的函数
在路由中指出
接下来在注册页面的HTML文件中使用ajax调用用户名判断函数进行判断
接下来启动项目,验证功能是否可以实现
首先我们先创建一个用户名和密码均为admin的用户
可以看到该用户的信息已保存到数据库中
当我们再在注册页的用户名输入框输入用户名admin时,用户名输入框鼠标离焦后效果如下
用户点击确定后用户名输入框内的值将被清空,让用户重新输入