欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-13 13:45:28
...

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条留言

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

  • 删除中间留言

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

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 的,最后一个按钮请求的结果是未找到

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

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值,获得跨域结果图

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