1.jquery实现留言本
删除前
删除后
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言本</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head><body><label><input type="text" id="msg" /></label><ol class="list"></ol><script>$("#msg").on("keydown", function (ev) {// 非空时回车if ($(this).val().length > 0) {if (ev.key === "Enter") {let msg = `<li>${$(this).val()} [<a href="javascript:;" onclick="$(this).parent().remove();">删除</a>]</li>`;// 新添加的留言在前$("ol.list").prepend(msg);// 清空上一条留言$(this).val(null);}}});</script></body></html>
2.$.get,$.post,$.ajax、$.ajax实现jsonp跨域请求
<button class="get">1.$.get():请求数据</button><button class="post">2.$.post():请求数据</button><button class="ajax">3.$.ajax():请求数据</button><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script>// 1.$.get(请求url，查询参数，成功回调)$(".get").click(function (ev) {$.get("users.php", { id: 2 }, function (data) {$(ev.target).after("<div></div>").next().html(data);});});// 2. post()$(".post").click(function (ev) {$.post("users.php", { id: 3 }, function (data) {// console.log(data);$(ev.target).after("<div></div>").next().html(data);});});// 3. $.ajax()$(".ajax").click(function (ev) {$.ajax({type: 'get',url: 'users.php',data: { id: 1 },dataType: 'html',success: function (data) {$("button:last-of-type").after("<div>").next().html(data);}})})</script>
- $.get,$.post,$.ajax、$.ajax请求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);// 以下语句配合$.getJSON()调用,其它请求时请注释掉// echo json_encode($user);}}} else {die('<span style="color:red">没找到</span>');}
- $.ajax实现jsonp跨域请求
<button class="jsonp">$.ajax():jsonp:跨域请求数据</button><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script>$(".jsonp").click(function (ev) {$.ajax({type: "get",url: "http://world.io/test.php?id=1&jsonp=?",dataType: "jsonp",// 告诉跨域访问的服务器需要返回的函数名称// jsonpCallback:"show",success: function (data) {console.log(data);$("button:last-of-type").after("<div>").next().html(`${data.name} 邮箱：${data.email}`);},});});</script>
- $.ajax jsonp跨域请求PHP代码
<?phpheader('content-type:text/html;charset=utf-8');// 获取回调名称$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];}// echo $user;// 动态生成handle()的调用echo $callback . '(' . $user . ')';
