jQuery中的DOM操作实现留言板功能、$get、 $post、 ajax跨域 - 前端学习

首页 > 博客列表 > jQuery中的DOM操作实现留言板功能、$get、 $post、 ajax跨域

博主信息

博文 29

粉丝 0

访问量 25150

专题推荐

更多>

1，留言板

<body>
    <textarea name="text" cols="30" rows="10"></textarea>
    <ol id="list"></ol>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        // 获取元素。
        const msg = $("textarea")
        const list = $("#list");
        // 创建事件。
        msg.keydown((ev) => {
            // 键盘事件中的key属性，表示按下的键名
            // console.log(ev.key);
            // 非空判断
            if (ev.key === "Enter") {
                // console.log(ev.currentTarget.value);
                if (ev.currentTarget.value.length === 0) {
                    alert("不能为空");
                    msg.focus();
                }  else  {
                    // 添加留言，将留言加入列表
                    let olStr = `<div><li>${ev.currentTarget.value}</li><button onclick="del(this)">删除留言</button></div>`;
                    list.append(olStr);
                    // 最后清空留言板
                    ev.currentTarget.value=null;
                }
            }
        })
        // 删除留言
        function del(ele){
            return confirm("是否删除？")?(ele.parentNode.outerHTML=null):false;
        }
    </script>
</body>

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

$.get

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

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

$.post

post 和 get 只是参数不同

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

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

$.ajax()

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

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

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

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

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

批改状态：未批改

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

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

0条评论

作者最新博文

01-03上课操作

2019-12-21 23:01:15