ajax
原生ajax
ajax 介绍
ajax 是技术名词a(Asynchronous)j(JavaScript)a(And)x(XML)的缩写，翻译过来就是异步的JavaScript语言和数据传输格式
是客户端通过HTTP向服务器端发送请求
可以不刷新页面的情况下局部的更新页面数据
使用ajax需在浏览器内置XMLHttpRequest对象
ajax使用
接下来借用英雄案例来更清晰的展示对于ajax的使用
用户名验证
html代码展示
为了方便该文件起名为02ajax.html
<body>
<div>
<label for="">用户名</label>
<input type="text" id="username">
<span id="userinfo"></span>
</div>
<div>
<label for="">密码</label>
<input type="text" id="password">
</div>
<div>
<label for="">邮箱</label>
<input type="text" id="email">
</div>
<div>
<label for="">电话</label>
<input type="text" id="tell">
</div>
<input id="btn_save" type="button" value="注册">
<script>
var btn_save=document.querySelector('#btn_save')
btn_save.addEventListener('click',function(){
/*
1）分别获取用户键入的用户名、密码等信息
2）使用ajax的方式将这些信息发送到服务器端
3）根据服务器端返回的信息，决定客户端如何显示
*/
var username=document.querySelector('#username').value
var password=document.querySelector('#password').value
var email=document.querySelector('#email').value
var tell=document.querySelector('#tell').value
// 创建 xmlhttprequest 对象
var xhr=new XMLHttpRequest()
// 配置要请求的url地址和请求方式
xhr.open('get',`02ajax.php?
username=${username}&password=${password}&email=${email}&tell=${tell}`)
// 为 xhr 注册一个事件，这个事件会在客户端与服务器交互过程中不断被调用
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
document.querySelector('#userinfo').innerHTML=xhr.responseText
console.log(xhr.responseText);
}
}
// 发送请求
xhr.send()
})
</script>
</body>
php代码展示
为了方便该文件起名为02ajax.php
<?php
$username=$_GET['username'];
if($username=='onlifes'){
echo '用户名已经被占用';
}else{
echo '恭喜，用户名可以使用';
}
ajax请求
使用ajax发送get请求
以下为html部分代码
document.querySelector('button').addEventListener('click', function () {
// 创建对象
var xhr=new XMLHttpRequest()
// 配置要请求的地址和请求方式
xhr.open('get','03get.php')
// 发送请求
xhr.send()
})
以下为php部分代码
主要就是试验ajax是否成功发送get请求如果没有发送的话是不会返回任何值的
<?php
echo 'hello';
重点：ajax 通过 get 方式发送请求的时候，参数需要写到请求地址的后面并且以问号分隔，如果由多个参数的话，参数与参数中间使用&分隔
例如xhr.open('get','03get.php?id=1&title=十二月底就放假了')
php端对于ajax发送的get请求获取的代码$id=$_GET['id'];
ajax获取服务器端返回值的代码
xhr.onreadystatechange = function () {
// readyState 属性的值等于4且只有等于4的时候才能证明完成了ajax交互，
//然后XMLHttpRequest 对象会自动的将服务器端返回的信息放到 responseText 属性中
if(xhr.readyState==4){
console.log(xhr.responseText);
}
}
此部分完整代码如下
<body>
<button>ajax 请求</button>
<script>
document.querySelector('button').addEventListener('click', function () {
// 创建对象
var xhr = new XMLHttpRequest()
// 配置要请求的地址和请求方式
xhr.open('get', '03get.php?id=5&title=明天就要放假了')
xhr.onreadystatechange = function () {
// readyState 属性的值等于4且只有等于4的时候才能证明完成了ajax交互，
//然后XMLHttpRequest 对象会自动的将服务器端返回的信息放到 responseText 属性中
if(xhr.readyState==4){
console.log(xhr.responseText);
}
}
// 发送请求
xhr.send()
})
</script>
</body>
ajax 发送 post 请求
需注意：open方法第一个参数改为 post 如 ```xhr.send(‘post’,‘02.php’)
传递的参数需放入send参数中，格式与get请求一样
需使用 setRequestHeader 方式设置请求头
php 端使用 $_POST 获取 ajax 发送的请求
html代码
<body>
<button>ajax 请求</button>
<script>
document.querySelector('button').addEventListener('click', function () {
// 创建对象
var xhr = new XMLHttpRequest()
// 配置要请求的地址和请求方式
xhr.open('post', '04post.php')
xhr.onreadystatechange = function () {
// readyState 属性的值等于4且只有等于4的时候才能证明完成了ajax交互，
//然后XMLHttpRequest 对象会自动的将服务器端返回的信息放到 responseText 属性中
if (xhr.readyState == 4) {
console.log(xhr.responseText);
}
}
//发送合适的请求头信息
xhr.setRequestHeader("Content-type", "application/x-www-formurlencoded");
// 发送请求
xhr.send('id=1&title=十二月底就放假了')
})
</script>
</body>
php代码
<?php
echo $_POST['id'];
ajax 用户名验证
html 代码
<body>
<div>
<label for="">用户名</label>
<input type="text" id="username">
<span id="userinfo"></span>
</div>
<div>
<label for="">密码</label>
<input type="text" id="password">
</div>
<div>
<label for="">邮箱</label>
<input type="text" id="email">
</div>
<div>
<label for="">电话</label>
<input type="text" id="tell">
</div>
<input id="btn_save" type="button" value="注册">
<script>
document.querySelector('#username').addEventListener('blur', function ()
{
// 创建对象
var xhr = new XMLHttpRequest()
// 配置请求方式和请求地址
xhr.open('get', 'checkUser.php?user=' + this.value)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.responseText == 'ok') {
document.querySelector('#userinfo').innerHTML = '恭喜你，
可以使用'
document.querySelector('#userinfo').style.color='green'
} else {
document.querySelector('#userinfo').innerHTML = '用户名已
经被占用'
document.querySelector('#userinfo').style.color='red'
}
}
}
// 发送请求
xhr.send()
})
</script>
</body>
php代码
<?php
$username=$_GET['user'];
if($username=='onlifes'){
echo 'no';
}else{
echo 'ok';
}
form 表单提交与 ajax 提交比较
相同点：都可用于提交数据
不同点：ajax可以获取数据，form表单不可以
登录
html 基础代码
<body>
<div>
<label for="">用户名</label>
<input type="text" id="username">
</div>
<div>
<label for="">密码</label>
<input type="text" id="password">
</div>
<div>
<input id="btn_login" type="button" value="登录">
<span id="error"></span>
</div>
<script>
var btn_login = document.querySelector('#btn_login')
var error=document.querySelector('#error')
btn_login.addEventListener('click', function () {
// 获取用户输入的用户名和密码
var username=document.querySelector('#username').value
var password=document.querySelector('#password').value
/*
单击按钮时，向 server.php 发送一个 ajax 请求将用户输入的用户名和密码发送给 server.php
server.php再去数据库中进行验证，根据验证结果返回信息
*/
// 创建对象
var xhr=new XMLHttpRequest()
// 配置请求的地址和请求方式
// 参数传递使用键=值的方式，键的名称随意命名
xhr.open('get',`server.php?u=${username}&p=${password}`)
// 为 xhr 注册事件，服务器返回数据的时候此事件会执行，并能够拿到服务器返回的数据
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.responseText=='ok'){
// 跳转到 home.html
window.location.href='home.html'
}else{
error.innerHTML='用户名或密码失败'
}
}
}
// 发送请求
xhr.send()
})
</script>
</body>
php 代码
<?php
$username=$_GET['u'];
$password=$_GET['p'];
if($username=='admin' && $password=='admin'){
echo 'ok';
}else{
echo 'no';
}
ajax 实现英雄管理
使用 Navicat 创建新的数据库和数据表
数据库手动创建选择编码utf8mb4
创建数据表代码如下
create table heroes(
id int primary key auto_increment,
title varchar(50) not null,
job varchar(50) not null,
skill varchar(100) not null,
skin varchar(100) not null
)
搭建英雄列表静态页面
html 部分代码
<body>
<div class="box">
<a href="#">添加英雄</a>
<table>
<thead>
<tr>
<th>英雄名称</th>
<th>英雄技能</th>
<th>英雄职业</th>
<th>英雄皮肤</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>德莱厄斯</td>
<td>断头台</td>
<td>战士</td>
<td>海克斯</td>
<td>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
静态页面的 css 样式代码
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #999;
}
.box{
width: 1000px;
margin: 0 auto;
}
table{
margin-top: 20px;
width: 100%;
border: 1px solid #ccc;
border-collapse: collapse;
text-align: center;
}
th,td{
border: 1px solid #ccc;
padding: 10px;
}
实现静态展示
html 部分代码经过修改后如下
<body>
<div class="box">
<a href="#">添加英雄</a>
<table>
<thead>
<tr>
<th>英雄名称</th>
<th>英雄技能</th>
<th>英雄职业</th>
<th>英雄皮肤</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>德莱厄斯</td>
<td>断头台</td>
<td>战士</td>
<td>海克斯</td>
<td>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
</tr> -->
</tbody>
</table>
</div>
<script>
loadHeroes()
// 获取所有英雄信息并展示到页面上
function loadHeroes() {
/*
1、页面加载时，发送一个 ajax 请求，以 get 方式请求 herolist.php
2、herolist.php 连接数据库，查询 heroes 表中的数据，返回一个关联数组
3、将关联数组转换为 json 字符串，作为返回值
4、html 拿到返回值，循环渲染到表格中
*/
// 创建 ajax 对象
var xhr = new XMLHttpRequest()
// 配置请求方式和地址
xhr.open('get', 'herolist.php')
// 注册事件
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
console.log(xhr.responseText);
var data = JSON.parse(xhr.responseText)
data.forEach(function (ele, index) {
console.log(ele);
var tr = document.createElement('tr')
tr.innerHTML = `
<td>${ele.title}</td>
<td>${ele.skill}</td>
<td>${ele.job}</td>
<td>${ele.skin}</td>
<td>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
`
document.querySelector('tbody').appendChild(tr)
})
}
}
// 发送请求
xhr.send()
}
</script>
</body>
创建关联的 php 文件
<?php
// 不同语言之间，只有一种共同都认识的数据类型，就是字符串
// json_encode 方法将一个关联数组转换为 json 格式字符串
// 创建连接
$link=mysqli_connect('localhost','root','root','tencent') or die('连接失败');
// 设置编码
mysqli_set_charset($link,'utf8');
// 拼写sql语句
$sql="select * from heroes";
// 查询
$res=mysqli_query($link,$sql);
if($res!=false){
/*将查询到的数据中的每1行数据转换为一个关联数组（将字段名称作为键，将对应的字段的值作为
值），
放到一个大数组中*/
$heroes=mysqli_fetch_all($res,MYSQLI_ASSOC);
// echo '<pre>';
// print_r($heroes);
// echo '</pre>';
echo json_encode($heroes);
}
添加英雄
思路：在更改过后的 html 代码中添加遮罩层和添加英雄的盒子，盒子中有文本框，文本框内输入要添加的值
输入完成后点击保存会返回数据库然后向数据表内添加输入进文本框的信息
实现以上操作的代码如下 找个合理的位置插入即可
————————分割线————————
<!-- 添加英雄 -->
<div class="add_box">
<span class="close">X</span>
<div class="row">
<label for="title">英雄名称</label>
<input type="text" id="title">
</div>
<div class="row">
<label for="job">英雄职业</label>
<input type="text" id="job">
</div>
<div class="row">
<label for="skill">英雄技能</label>
<input type="text" id="skill">
</div>
<div class="row">
<label for="skin">英雄皮肤</label>
<input type="text" id="skin">
</div>
<div class="row">
<button id="btn_add">保存</button>
</div>
</div>
<!-- 遮罩层 -->
<div class="cover"></div>
添加样式设置
.cover{
display: none;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, .3);
}
.add_box{
display: none;
position: absolute;
width: 600px;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -150px;
padding: 15px;
background-color: #fff;
z-index: 999;
}
.close{
position:absolute;
width: 20px;
height: 20px;
right: 10px;
top: 10px;
border: 1px solid black;
border-radius: 50%;
text-align: center;
line-height: 20px;
cursor: pointer;
}
.row{
width: 500px;
height: 30px;
margin: 0 auto;
margin-top: 20px;
/* border: 1px solid black; */
text-align: center;
}
.row input{
width: 80%;
height: 20px;
outline: none;
}
#btn_add{
width: 100px;
height: 35px;
background-color: orange;
color: #fff;
border: none;
outline: none;
text-align: center;
line-height: 35px;
border-radius: 5px;
cursor: pointer;
}
并在js中找合理的位置添加如下代码
// 添加英雄
btn_add.addEventListener('click', function () {
/*
1、获取用户输入的信息
2、以 post 方式发送一个ajax请求给 add.php，同时将上面获取的
参数传递过去
3、add.php 页面获取到参数后，将其保存到数据库中
4、add.php 页面返回信息
5、根据 add.php 页面的返回信息做出相应处理
*/
var title = document.querySelector('#title').value
var job = document.querySelector('#job').value
var skill = document.querySelector('#skill').value
var skin = document.querySelector('#skin').value
// 创建对象
var xhr = new XMLHttpRequest()
// 配置请求方式和地址
xhr.open('post', 'add.php')
// 注册事件，接受服务器返回的数据
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.responseText == 'ok') {
// 分别设置遮罩层和添加英雄盒子隐藏
cover.style.display = 'none'
add_box.style.display = 'none'
loadHeroes()
} else {
}
}
}
//发送合适的请求头信息
xhr.setRequestHeader("Content-type", "application/x-www-formurlencoded");
// 发送请求
xhr.send(`title=${title}&job=${job}&skill=${skill}&skin=${skin}`)
})
新创建一个与添加英雄操作关联的 php 文件
<?php
$title=$_POST['title'];
$job=$_POST['job'];
$skill=$_POST['skill'];
$skin=$_POST['skin'];
// 创建连接
$link=mysqli_connect('localhost','root','root','tencent') or die('连接失败');
// 设置编码
mysqli_set_charset($link,'utf8');
// 拼写sql语句
$sql="insert into heroes values(null,'$title','$job','$skill','$skin')";
// echo $sql;
// 查询
$res=mysqli_query($link,$sql);
if($res==true){
echo 'ok';
}else{
echo 'no';
}
删除英雄
首先说一下我对于删除英雄的思路
按照主键也就是 id 来删除
html 部分使用 data- 来设置元素自定义属性
js 部分使用 element.dataset. 属性名称的方式来获取自定义属性
在执行完毕删除操作之前可以又一个确认的环节，以免删除错误
接下来是实际操作
————————分割线————————
html 部分修改 loadHeroes 中的删除超链接的代码，修改后如下
<a href="javascript:void(0)" class="delete" data-id="${ele.id}">删除</a>
js 部分使用事件委托与冒泡的方式来为删除注册单击事件 添加的删除部分代码如下
/***
* 利用事件委托和事件冒泡机制实现 删除和编辑功能
* 1、获取当前单击的删除对应的英雄的id
* 2、发送一个 ajax 请求给 delete.php 页面，同时将 id 作为参数传递过去
* delete.php 根据id 查询英雄的详细信息，并返回
*/
tbody.addEventListener('click', function (e) {
if (e.target.className == 'delete') {
// 让用户确认是否删除
var res=confirm('真的姚删除吗?')
if(!res){ // res==false
return false;
}
// 获取当前单击的删除超链接中的自定义属性的id值
var id=e.target.dataset.id
// 创建请求对象
var xhr=new XMLHttpRequest()
// 配置请求方式和地址
xhr.open('get','delete.php?id='+id)
// 注册事件
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.responseText=='ok'){
// 重新加载数据
loadHeroes()
alert('删除成功')
}else{
alert('删除失败')
}
}
}
// 发送请求
xhr.send()
}
})
创建一个与删除操作关联的 php 文件 代码如下
<?php
$id=$_GET['id'];
// 创建连接
$link=mysqli_connect('localhost','root','root','tencent') or die('连接失败');
// 设置编码
mysqli_set_charset($link,'utf8');
// 拼写sql语句
$sql="delete from heroes where id=$id";
// 查询
$res=mysqli_query($link,$sql);
if($res){
echo 'ok';
}else{
echo 'no';
}
编辑英雄
思路：点击编辑弹出一个盒子，盒子中有待编辑内容的文本框
编辑完成后点击保存会去数据库中更新信息 更新的时候所有字段全部更新一遍
————————分割线————————
html 添加编辑盒子
<!-- 编辑英雄 -->
<div class="edite_box">
<span class="close">X</span>
<!-- 隐藏域，用来存储英雄id -->
<input type="hidden" id="edite_id">
<div class="row">
<label for="edite_title">英雄名称</label>
<input type="text" id="edite_title">
</div>
<div class="row">
<label for="edite_job">英雄职业</label>
<input type="text" id="edite_job">
</div>
<div class="row">
<label for="edite_skill">英雄技能</label>
<input type="text" id="edite_skill">
</div>
<div class="row">
<label for="edite_skin">英雄皮肤</label>
<input type="text" id="edite_skin">
</div>
<div class="row">
<button id="btn_edite">保存</button>
</div>
</div>
js 中给编辑超链接添加单击事件，添加到 tbody 元素的单机事件中
/***
* 1、显示 edite_box 盒子
* 2、获取待编辑的英雄的id
* 3、发送一个 ajax 请求给 getHeroById.php，此php页面根据id查询英雄的详细信息并返
回
* 4、从返回的数据中获取对应的值填充到对应的文本框中
* 5、点击 保存 按钮，获取用户填入的最新数据，发送一个 ajax 请求给 edite.php，此页
面连接
* 数据库进行更新，并根据更新结果返回数据
*/
// 1)
cover.style.display='block'
edite_box.style.display='block'
// 2)
var id=e.target.dataset.id
// 3)
var xhr=new XMLHttpRequest()
xhr.open('get','getHeiroById.php?id='+id)
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
var data=JSON.parse(xhr.responseText)
// 4）
document.querySelector('#edite_id').value=data.id
document.querySelector('#edite_title').value=data.title
document.querySelector('#edite_job').value=data.job
document.querySelector('#edite_skill').value=data.skill
document.querySelector('#edite_skin').value=data.skin
}
}
xhr.send()
接下来为保存添加单击事件
// 更新数据
btn_edite.addEventListener('click',function(){
/**
* 1、获取用户修改后的数据
* 2、发送一个 ajax 请求给 edite.php，将这些数据传递过去，此页面连接数据库更新数据，并根
据更新结果
* 返回信息
*/
// 1）
var id=document.querySelector('#edite_id').value
var title = document.querySelector('#edite_title').value
var job = document.querySelector('#edite_job').value
var skill = document.querySelector('#edite_skill').value
var skin = document.querySelector('#edite_skin').value
// 2）
var xhr=new XMLHttpRequest()
xhr.open('post','edite.php')
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.responseText=='ok'){
cover.style.display='none'
edite_box.style.display='none'
// 刷新数据
loadHeroes()
}else{
alert('更新失败')
}
}
}
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(`id=${id}&title=${title}&job=${job}&skill=${skill}&skin=${skin}`)
})
最后为编辑创建一个 php 文件
<?php
$id=$_POST['id'];
$title=$_POST['title'];
$job=$_POST['job'];
$skill=$_POST['skill'];
$skin=$_POST['skin'];
// 创建连接
$link=mysqli_connect('localhost','root','root','tencent') or die('连接失败');
// 设置编码
mysqli_set_charset($link,'utf8');
// 拼写sql语句
$sql="update heroes set title='$title',job='$job',skill='$skill',skin='$skin'
where id=$id";
// 查询
$res=mysqli_query($link,$sql);
if($res==true){
echo 'ok';
}else{
echo 'no';
}
282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
