一、用户注册
1、以下是用户注册的前端页面：register.html
<!DOCTYPE html>
<html>
<head>
<title>用户注册$.post()</title>
<meta charset="utf-8">
</head>
<body>
<h3>用户注册</h3>
<p><label for="email">邮箱：</label><input type="text" name="email" id="email" placeholder="example@qq.com"></p>
<p><label for="password">密码：</label><input type="password" name="password" id="password" placeholder="密码不少于6位"></p>
<p><button>注册</button></p>
<script src="../lib/jQuery.js"></script>
<script type="text/javascript">
$('button').click(function () {
if ($('#email').val().length === 0) {
$('#email').after('<span style="color:red">邮箱不能为空</span>').next().fadeOut(3000);
$('#email').focus();
return false;
}
if ($('#password').val().length === 0) {
$('#password').after('<span style="color:red">密码不能为空</span>').next().fadeOut(3000);
$('#password').focus();
return false;
} else if ($('#password').val().length < 6) {
$('#password').after('<span style="color:red">密码不能小于六位</span>').next().fadeOut(3000);
$('#password').focus();
return false;
}
$.post(
'inc/checklogin.php',
{
email: $('#email').val(),
password: $('#password').val()
},
function (data,status,xhr) {
// console.log(data);
if (data.status === 1){
$('button')
.after('<span style="color: red"></span>')
.next()
.html(data.message)
.fadeOut(3000);
} else {
$('button')
.after('<span style="color: green"></span>')
.next()
.html(data.message)
.fadeOut(3000);
}
},
'json'
);
});
</script>
</body>
</html>说明：以上代码是用户注册的前端页面，对用户输入的内容作了限制，不能为空，密码不能小于六位数，通过Ajax中的$.post()函数与服务器进行交互，实现用户的注册。
2、以下是服务器端的验证代码：checkregister.php
<?php
//链接数据库并验证用户登录信息
$email = htmlspecialchars(trim($_POST['email']));
$password = htmlspecialchars(trim($_POST['password']));
$pdo = new PDO('mysql:host=localhost;dbname=db100;charset=utf8','root',123456);
$sql = "SELECT COUNT(*) FROM `user` WHERE `email` = :email";
$stmt = $pdo->prepare($sql);
$stmt->execute(['email'=>$email]);
if($stmt->fetchColumn(0) == 1){
$status = 1;
$message = '该用户已经存在';
} else {
$status = 0;
$message = '注册成功';
$sql = "INSERT INTO `user` SET `email`=:email,`password`=:password";
$stmt = $pdo->prepare($sql);
$stmt->execute(['email'=>$email,'password'=>$password]);
}
echo json_encode(['status'=>$status,'message'=>$message]);说明：服务器端主要是对用户输入的信息 的验证，如果已存在则提示用户，如果不存在，则提示用户注册成功并把数据添加到数据库中，最后通过json把返回的数据相应给***端，完成用户的注册。
二、ajax完成省市区三级联动的下拉框
1、首先准备三个json文件
1.json:
[
{
"proId": 1,
"proName": "安徽省"
},
{
"proId": 2,
"proName": "江苏省"
}
]2.json:
[
{
"cityId": 1,
"cityName": "合肥市",
"proId":1
},
{
"cityId": 2,
"cityName": "芜湖市",
"proId":1
},
{
"cityId": 3,
"cityName": "南京市",
"proId":2
},
{
"cityId": 4,
"cityName": "苏州市",
"proId":2
}
]3.json:
[
{
"areaId": 1,
"areaName": "包河区",
"cityId": 1
},
{
"areaId": 2,
"areaName": "蜀山区",
"cityId": 1
},
{
"areaId": 3,
"areaName": "镜湖区",
"cityId": 2
},
{
"areaId": 4,
"areaName": "弋江区",
"cityId": 2
},
{
"areaId": 5,
"areaName": "玄武区",
"cityId": 3
},
{
"areaId": 6,
"areaName": "六合区",
"cityId": 3
},
{
"areaId": 7,
"areaName": "吴江区",
"cityId": 4
},
{
"areaId": 8,
"areaName": "昆山区",
"cityId": 4
}
]2、然后准备前端页面的代码，这里主要使用ajax中的$.getJSON()函数获取服务端数据demo6.html
<!DOCTYPE html>
<html>
<head>
<title>ajax省时区三级联动</title>
<meta charset="utf-8">
</head>
<body>
省:<select id="pro"></select>
市:<select id="city"></select>
区县:<select id="area"></select>
<script src="../lib/jQuery.js"></script>
<script type="text/javascript">
$.getJSON('inc/1.json',function (data){
let option = '<option value="">选择(省)</option>';
$.each(data,function (i) {
option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
$('#pro').html(option);
})
$('#pro').change(function (){
$.getJSON('inc/2.json',function (data){
let option = '';
$.each(data,function (i) {
if (data[i].proId == $('#pro').val()){
option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
$('#city').html(option);
}
})
})
})
$('#city').change(function (){
$.getJSON('inc/3.json',function (data){
let option = '';
$.each(data,function (i) {
if (data[i].cityId == $('#city').val()){
option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
$('#area').html(option);
}
})
})
})
})
</script>
</body>
</html>说明：省市区三级联动的主要逻辑是服务器数据表的设计，其中市级的表中有对应的省级的id，而区级的表中有对应的市级的id，这样只需要在读取的时候加上一个条件就能实现三级的联动功能。
总结：jQuery中对ajax操作进行了封装，提供一套简单的接口，简化了用户的Ajax请求，其中包括
load()方法
1.这是jQuery中最简单的Ajax请求方法,默认为GET请求方式;
2.语法: load(url[,data,callback]),load(请求的url地址,请求数据,请求成功后回调函数);
(1).url: 请求的服务器上的资源的url地址,可以是一个txt,html,php....
(2).data:
[1]. GET请求: 无参数或是名值对格式字符串;
[2]. POST请求: 对象或数组;
(3).function(data,statuStr,xhr), function(响应文本,状态字符串(success),xhr对象)
3.调用: 该方法需要在jQuery对象上调用,回调适用于jQuery集合中每一个元素,例如: $('#box').load(...);
4.优势:
(1).自动参数自动判断请求类型是GET还是POST;
(2).可直接将load()返回值做为DOM元素内容自动插入,省去了append()等DOM操作
5.返回: 响应的内容;
$.get()函数
1.$.get(),用于从服务器上读取内容
2.语法:$.get(url[,data][,callback][,dataType])
3.url: 服务器上的url地址,为空表示当前地址;
4.data:
(1).查询字符串格式: name=peter&age=88;
(2).对象字面量: {name:'peter',age:88},自动序列化为上面的查询字符串;
5.callback: 请求成功的回调函数,function(响应文本,状态字符串,xhr对象),如果不需要回调,可设为null;
6.dataType: 响应内容类型/应答消息体, html/text/xml/json/script/jsonp;
7.返回值: 返回xhr对象
$.getJSON()函数
1. $.getJSON()专用于解析从服务器上返回的json格式的内容;
2. 其实它就是$.get()函数中,将返回数据类型dataType设置为'json'格式时的简写函数;
3. $.getJSON()需要读取json格式的数据,为简化起见,我直接创建了一个json文件,实际开发中应该从接口获取;
$.getScript()函数
1. $.getScript()用于动态加载外部的javascript脚本文件;
2. $.getScript(脚本地址,成功回调);
3. 可以任何位置加载外部脚本
$.post()函数
1. $.post()用于向服务器发送大量的,敏感的信息(信息在消息体中而非url地址中)
2. $.post(url[,data][,callback][,dataType]),参数与$.get()相同
3. url: http请求的url处理程序;
4. data: 消息体中的数据,以查询字符串或对象字面量形式提供;
5. callback: 成功后的回调方法,function(data,status,xhr){...};
6. dataType: 期望服务器端响应返回的数据格式,如html,json,text,xml,_default...
$.ajax()函数
1.load(),$.get(),$.getJSON(),$.getScript(),$.post()其实都是$.ajax()快捷方式;
2.$.ajax()的参数是一个对象,键名对应的属性非常多,并且键名不允许自定义,很多之前我们已经学过了;
3.常用属性:
(1). url : 请求的url资源地址;
(2). type: 请求的类型,get / post;
(3). data: 发送的参数;
(4). dataType: 响应的数据类型;
(5). success: 响应成功的回调方法;
4.该方法是jQuery中Ajax的底层实现,前面的方法或函数其实都在它基础实现的功能封装;
