jQuery留言板dom操作-ajax的get|post|jsonp跨域

2021年01月14日 00:17:42阅读数:102博客 / 葡萄枝子 / JavaScript

jQuery留言板dom操作-ajax的get|post|jsonp跨域

  1. 用常用的jQuery中的DOM操作,实现前面写的的留言本案例(todolist)
  2. 实例演示$.get,$.post,并用$.ajax再实现一遍,并用$.ajax实现jsonp中跨域请求
  • body 中引入 jQuery 库
  1. <!-- 引入 jQuery 库 -->
  2. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

1. 用常用的jQuery中的DOM操作,实现前面写的的留言本案例(todolist)

  1. <!-- jQuery中的DOM操作,实现前面写的的留言本 -->
  2. <label><input type="text" id="msg" /></label>
  3. <ol class="list"></ol>
  4. <script>
  5. // 留言板追加数据
  6. $('#msg').on('keydown', function (ev) {
  7. // 非空回车时
  8. if ($(this).val().length > 0) {
  9. if (ev.key == 'Enter') {
  10. let msg = `<li>${$(this).val()} [<a href="javascript:;" onclick="$(this).parent().remove();">删除</a>]</li>`;
  11. // 新添加的留言在前
  12. $('ol.list').prepend(msg);
  13. // 清空上一条留言
  14. $(this).val(null);
  15. }
  16. }
  17. });
  18. </script>
  • 添加3条留言

留言本

  • 删除中间留言

删除留言

2. 实例演示$.get,$.post,并用$.ajax再实现一遍,并用$.ajax实现jsonp中跨域请求

2.1 实例演示$.get,$.post,并用$.ajax再实现一遍

  • body 中添加html和js
  1. <!-- 实例演示$.get,$.post,并用$.ajax再实现一遍 -->
  2. <select name="select" id="select">
  3. <option value="1">1</option>
  4. <option value="2">2</option>
  5. <option value="3">3</option>
  6. <option value="4">4</option>
  7. </select>
  8. <hr />
  9. <!-- $.get() 请求方法 -->
  10. <button class="get">$.get()</button>
  11. <!-- $.post() 请求方法 -->
  12. <button class="post">$.post()</button>
  13. <!-- $.ajax() - get 请求 -->
  14. <button class="ajax-get">$.ajax() - get</button>
  15. <!-- $.ajax() - post 请求 -->
  16. <button class="ajax-post">$.ajax() - post</button>
  17. <script>
  18. $("button").click(function (ev) {
  19. const select = $('#select').val();
  20. const url = 'ajax/users.php';
  21. switch ($(this).attr("class")) {
  22. // $.get() 请求方法
  23. case 'get':
  24. $.get(url, { id: select }, function (data) {
  25. // 防止重复添加
  26. if (!$(ev.target).next('p').length)
  27. $(ev.target).after("<p></p>").next("p").html(data);
  28. });
  29. break;
  30. // $.post() 请求方法
  31. case 'post':
  32. $.post(url, { id: select }, function (data) {
  33. if (!$(ev.target).next('p').length)
  34. $(ev.target).after("<p></p>").next("p").html(data);
  35. });
  36. break;
  37. // $.ajax() - get 请求
  38. case 'ajax-get':
  39. $.ajax({
  40. type: 'get',
  41. url: url,
  42. data: { id: select },
  43. // dataType: 'html',
  44. success: function (data) {
  45. if (!$(ev.target).next('p').length)
  46. $(ev.target).after("<p></p>").next("p").html(data);
  47. }
  48. });
  49. break;
  50. // $.ajax() - post 请求
  51. case 'ajax-post':
  52. $.ajax({
  53. type: 'post',
  54. url: url,
  55. data: { id: select },
  56. // dataType: 'html',
  57. success: function (data) {
  58. if (!$(ev.target).next('p').length)
  59. $(ev.target).after("<p></p>").next("p").html(data);
  60. }
  61. });
  62. }
  63. });
  64. </script>
  • 请求的 ajax/users.php 是默认的
  1. <?php
  2. // 二维数组来模拟数据表的查询结果
  3. $users = [
  4. ['id' => 1, 'name' => '天蓬大人', 'age' => 66],
  5. ['id' => 2, 'name' => '灭绝师妹', 'age' => 55],
  6. ['id' => 3, 'name' => '西门老妖', 'age' => 44],
  7. ];
  8. // $_REQUEST: 相当于 $_GET + $_POST + $_COOKIE 三合一
  9. if (in_array($_REQUEST['id'], array_column($users, 'id'))) {
  10. foreach ($users as $user) {
  11. if ($user['id'] == $_REQUEST['id']) {
  12. // vprintf(输出模板, 数组表示的参数)
  13. vprintf('%s: %s %s岁',$user);
  14. // 以下语句配合$.getJSON()调用,其它请求时请注释掉
  15. // echo json_encode($user);
  16. }
  17. }
  18. } else {
  19. die('<span style="color:red">没找到</span>');
  20. }
  • 下拉选项依次选 1~4,依次点击四个按钮,由于 users 没 id=4 的,最后一个按钮请求的结果是未找到

ajax请求

2.2 用$.ajax实现jsonp中跨域请求

  • body 中追加html和js
  1. <!-- 用$.ajax实现jsonp中跨域请求 -->
  2. <p>
  3. <label for="jsonp">jsonp跨域</label>
  4. <select name="jsonp" id="jsonp">
  5. <option value="1">1</option>
  6. <option value="2">2</option>
  7. <option value="3">3</option>
  8. </select>
  9. </p>
  10. <script>
  11. // jsonp 跨域请求动态 id , 回调函数名为 show 告诉服务器端
  12. $("#jsonp").change(function () {
  13. let id = $(this).val();
  14. $.ajax({
  15. type: 'get',
  16. url: 'http://wordpress/world/test.php?id=' + id + '&jsonp=show',
  17. dataType: 'jsonp',
  18. jsonpCallback: "show",
  19. });
  20. });
  21. // 处理响应结果的回调函数
  22. function show(res) {
  23. // 将内容追加到页面中
  24. $("#jsonp").after("<p></p>").next().html(`${res.name} (${res.email})`);
  25. }
  26. </script>
  1. <?php
  2. header('content-type:text/html;charset=utf-8');
  3. // 获取回调名称
  4. $callback = $_GET['jsonp'];
  5. $id = $_GET['id'];
  6. // 模拟接口数据
  7. $users = [
  8. 0=>'{"name":"朱老师", "email":"peter@php.cn"}',
  9. 1=>'{"name":"西门老师", "email":"xm@php.cn"}',
  10. 2=>'{"name":"猪哥", "email":"pig@php.cn"}'
  11. ];
  12. if (array_key_exists(($id-1), $users)) {
  13. $user = $users[$id-1];
  14. }
  15. // echo $user;
  16. // 动态生成handle()的调用
  17. echo $callback . '(' . $user . ')';
  • html文档 jsonp跨域,依次点击3,2,1改变传递的id值,获得跨域结果图

jsonp跨域

批改状态:合格

老师批语:

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    葡萄枝子
    博文
    27
    粉丝
    0
    评论
    0
    访问量
    1513
    积分:0
    P豆:54