jQuery_03

ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），
是指一种创建交互式网页应用的网页开发技术
支持页面的局部刷新
减轻服务器的压力
提高用户体验
调试比较麻烦

1. 一般由事件触发, 向服务器发送请求
2. 服务器接收请求, 并根据请求响应结果给浏览器端
3. 浏览器端收到响应的结果,刷新局部页面

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>";
}