Community Learn Tools Library Leisure
search
English
Home > List of blog posts > jQuery中的DOM操作实现留言板功能、$get、 $post、 ajax跨域
Blogger Information
Blog 29
fans 0
comment 0
visits 19781
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery中的DOM操作实现留言板功能、$get、 $post、 ajax跨域
手机用户1576673622
Original
744 people have browsed it

1，留言板

  1. <body>
  2.     <textarea name="text" cols="30" rows="10"></textarea>
  3.     <ol id="list"></ol>
  5.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  6.     <script>
  7.         // 获取元素。
  8.         const msg = $("textarea")
  9.         const list = $("#list");
  11.         // 创建事件。
  12.         msg.keydown((ev) => {
  13.             // 键盘事件中的key属性，表示按下的键名
  14.             // console.log(ev.key);
  15.             // 非空判断
  16.             if (ev.key === "Enter") {
  17.                 // console.log(ev.currentTarget.value);
  18.                 if (ev.currentTarget.value.length === 0) {
  19.                     alert("不能为空");
  20.                     msg.focus();
  21.                 }  else  {
  22.                     // 添加留言，将留言加入列表
  23.                     let olStr = `<div><li>${ev.currentTarget.value}</li><button onclick="del(this)">删除留言</button></div>`;
  24.                     list.append(olStr);
  25.                     // 最后清空留言板
  26.                     ev.currentTarget.value=null;
  27.                 }
  28.             }
  29.         })
  30.         // 删除留言
  31.         function del(ele){
  32.             return confirm("是否删除？")?(ele.parentNode.outerHTML=null):false;
  33.         }
  34.     </script>
  35. </body>

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

$.get

  1.     // 1. $.get(请求url,查询参数,成功回调)
  2.     $(".get").click(function (ev) {
  3.       // $.get("users.php?id=1", function (data) {
  4.       $.get("users.php", { id: 2 }, function (data) {
  5.         console.log(data);
  6.         console.log(ev.target);
  7.         $(ev.target).after("<div></div>").next().html(data);
  8.       });
  9.     });

输出结果：2: 灭绝师妹 55岁

$.post

post 和 get 只是参数不同

  1.     $(".post").click(function (ev) {
  2.       $.post("users.php", { id: 3 }, function (data) {
  3.         console.log(data);
  5.         $(ev.target).after("<div></div>").next().html(data);
  6.       });
  7.     });

输出结果：3: 西门老妖 44岁

$.ajax()

1，ajax可以完成上面两种操作。

  1.       $.ajax({
  2.           type:'post',
  3.           url:'users.php',
  4.           data: {id:2},
  5.           dataType: 'html',
  6.           success: function (data){
  7.               $(ev.target).after("<div></div>").next().html(data);
  8.           }
  9.       })

输出结果：2: 灭绝师妹 55岁
2，ajax实现jsonp跨域

  1.     $(".jsonp").click(function (ev) {
  2.       $.ajax({
  3.         type: "get",
  4.         url: "http://world.io/test.php?id=2&jsonp=?",
  5.         dataType: "jsonp",
  6.         // 告诉跨域访问的服务器需要返回的函数名称
  7.         //   jsonpCallback: "show",
  8.         success: function (data) {
  9.           console.log(data);
  10.           $("button:last-of-type").after("<div>").next().html(`${data.name} [${data.email}}]`);
  11.         },
  12.       });
  13.     });

输出结果：西门老师 [xm@php.cn}]

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post