基于jquery的小记事本，及$.get/$.post/$.ajax跨域请求的简单实现

1 基于jquery的小型记事本

最简单的html页面结构

<div class="textbook">
    <label for="">请留言：</label>
    <input type="text" class="newMessage" id="" />
    <ol class="oldMessage">
    </ol>
</div>

实现逻辑为：

• 用户在文本框内输入留言内容，按回车键：
• 留言将会自动添加到下面的留言列表中最先位置。
• 清空文本框的内容

具体实现：

// 1 添加新留言（以回车键触发）
$(".newMessage").keydown(function (e){
//判断输出是否结束，即按下的键是不是回车键，是则代表输入结束
if(e.key == "Enter"){
//验证输入内容是否为空，是则给出弹窗提示，
    if($("newMessage).val()  == ""){
    alert("留言不能为空");
    }else {
//留言不为空，则将留言写入预留的ol列表中
    let new = `<li>${$(".newMessage").val()}</li>`;
//prepend()添加为第一个子元素，append()添加为最后一个子元素
    $("ol").prepend(new);
    }
}
});
//2 删除旧留言(以点击触发)
$("ol").click（function(e){
$(e.target).remove();
}）；

2 $.get/$.post/$.ajax跨域请求的简单实现

公共代码

//触发get数据请求
<button class="get">$.get()请求数据</button>
//触发post请求
<button class="post">$.post()请求数据</button>
//触发ajax的跨域数据请求
<button class="jsonp">$.ajax():JSONP:跨域请求数据</button>
//引入jquery库
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

2.1 $.get()

$.get((请求url,查询参数,成功回调)
前端请求html与后面处理php在同一个服务器的同一个目录下

前端html:

//设置按钮触发
$(".get").click(function( ev ){
//因为是get方式请求数据，也可以写成：
//$.get("test3.php?id=2",function(data){});
    $.get("test3.php",{id:2},function(data){
    $(ev.target).after("<div></div").next().html(data);
    });
});

后端php:

<?php
$users = [
    ['id' => 1, 'name' => '天蓬大人', 'age' => 66],
    ['id' => 2, 'name' => '灭绝师妹', 'age' => 55],
    ['id' => 3, 'name' => '西门老妖', 'age' => 44],
];
// $_REQUEST相当于$_GET + $_POST + $_COOKIE 三合一
if (in_array($_REQUEST['id'], array_column($users, 'id'))){
    foreach ($users as $user) {
        if ($user['id'] == $_REQUEST['id']) {
            // vprintf(输出模板, 数组表示的参数)
            vprintf('%s: %s %s岁',$user);
        }
    }
} else {
    die('<span style="color:red">没找到</span>');
}

运行结果：点击get按钮，页面显示：
2: 灭绝师妹 55岁

2.2 $.post()

$.post((请求url,查询参数,成功回调)
前端请求html与后面处理php在同一个服务器的同一个目录下，写法与$.get()一致

//设置按钮触发
$(".post").click(function( ev ){
    $.post("test3.php",{id:3},function(data){
    $(ev.target).after("<div></div").next().html(data);
    });
});

后端代码与2.1$.get()的后端代码保持一致
运行结果：点击post按钮，页面显示：
3: 西门老妖 44岁

2.3 $.ajax()跨域数据请求

建立两个服务器，前端服务器hello访问后端world服务器的php脚本

后端world上的脚本代码：

// 获取回调名称
$callback = $_GET['jsonp'];
$id = $_GET['id'];
// 模拟接口数据
$users = [
    0=>'{"name":"朱老师", "email":"peter@php.cn"}',
    1=>'{"name":"西门老师", "email":"xm@php.cn"}',
    2=>'{"name":"猪哥", "email":"pig@php.cn"}' 
];
if (array_key_exists(($id-1), $users)) {
    $user = $users[$id-1];
}
// 动态生成handle()的调用
echo $callback . '(' . $user . ')';

前端hello的按钮处理script脚本：

//$.ajax({
//        type:'post',
//        url:'users.php',
//        data: {id:2},
//        dataType: 'html',
//        success: function (){}
//})
$(".ajax").click(function(ev){
    $.ajax(
        type:'get',
        url:'http://world:8012/test3.php?id=2&jsonp=?",
        //data:{id:2},上面是get方式，已经在url中传递数据
        datatype:"jsonp",
        success:function(data){
        $("ajax").after("div").next().html(`${data.name} [${data.email}}]`);
        },
    );
});

运行结果：点击ajax按钮，页面显示：
2: 灭绝师妹 55岁