ajax
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），
是指一种创建交互式网页应用的网页开发技术
支持页面的局部刷新
减轻服务器的压力
提高用户体验
调试比较麻烦
- 一般由事件触发, 向服务器发送请求
- 服务器接收请求, 并根据请求响应结果给浏览器端
- 浏览器端收到响应的结果,刷新局部页面
load的使用
基础使用
html代码:
// 单击按钮
$('button').click(function(){
// url是相对路径
$('#d').load('load.html');
// url是网络路径
$('#d').load('http://localhost/PSD1902/14_jQuery/Day_03/code/load.html');
});
load.html
<span>这里是load加载的内容</span>
带有参数的写法
html代码:
// 单击按钮
$('button').click(function(){
// 异步加载PHP文件返回的内容, 参数是GET传递
// $('#d').load('target.php?id=1');
// 参数2写了, 就是post传参
// $('#d').load('target.php', {id:1});
});
target.php
echo "这里是PHP";
get方法
$('button').click(function () {
$.get(
'get.php', {
id: 1
},
function (response, status, xhr) {
console.log(response);
console.log(status);
console.log(xhr);
// 将响应结果赋值给div(局部刷新)
$('#d').html(response);
}
);
});
post方法
$('button').click(function(){
$.post(
'post.php',
{id:1},
function(response, status, xhr){
console.log(response);
console.log(status);
console.log(xhr);
// 将json转成js变量
var u = JSON.parse(response);
console.log(u);
// 将响应结果赋值给div(局部刷新)
$('#d').html(u.nick_name);
}
);
});
php中代码:
使用 json_encode(); 转化数组得到字符串
ajax注册操作
html代码
<h3>用户注册</h3>
<div id="msg"></div>
<form action="">
用户名: <input type="text" name="username" value=""><br>
密码: <input type="password" name="password" value=""><br>
昵称: <input type="text" name="nick_name" value=""><br>
<input type="button" id="btn" value="注册">
</form>
<script type="text/javascript" src="../../jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
// 就绪函数
$(function(){
// 单击"注册"按钮,通过ajax提交表单
$('#btn').click(function(){
console.log($('form').serialize());
$.ajax({
type: 'post',
url: 'register.php',
data: $('form').serialize(),
success: function(res) {
console.log(res);
// 将响应结果填充到消息div中
$('#msg').html(res);
}
});
});
});
</script>
php代码
<?php
// 接收数据
$data = $_POST;
// print_r($data);
// 1. 使用PDO方式连接数据库
$dsn = "mysql:host=localhost;dbname=coding;port=3306";
$pdo = new PDO($dsn, 'root', '');
// 2. 使用预处理方式,添加用户(coding_user)
$u = $data['username'];
$p = md5($data['password']);
$n = $data['nick_name'];
$up = ''; // 用户头像
$ua = time(); // 更新时间
$ca = time(); // 添加时间
$sql = "INSERT INTO coding_user (`username`, `password`, `nick_name`, `user_photo`, `updated_at`, `created_at`) VALUES (:u,:p,:n,:up,:ua,:ca)";
// 3. 执行插入(受影响的行数)
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':u', $u);
$stmt->bindParam(':p', $p);
$stmt->bindParam(':n', $n);
$stmt->bindParam(':up', $up);
$stmt->bindParam(':ua', $ua);
$stmt->bindParam(':ca', $ca);
$res = $stmt->execute(); // 返回受影响的行数
// 4. 根据步骤3的结果,响应消息给浏览器端
if ($res) {
echo "<span style='color:green'>注册成功</span>";
} else {
echo "<span style='color:red'>注册失败</span>";
}
