jQuery中的Ajax请求-Jquery-前端日记簿

首页 Jquery 正文

jQuery中的Ajax请求

2023-10-05 84

在jQuery中使用Ajax步骤：

<script>
        $.ajax({
            url:"",
            data:{

            },
            type: "post",
            dataType: "json",
            async: true,
            success(res){

            },
            error(){

            }
        })
</script>

我们可以在视图层去写俩个跟之前一样单独标签去操作

在我们的js中去给按钮增加点击事件通过用jQuery中的$.ajax的方式来写

在里面我们写好接口地址以及返回的文件格式请求类型然后将我们返回的数据打印在输出台上

这样我们就已经拿到了我们需要的内容

然后将我们对象中的数值取出进行遍历在遍历的过程中在循环外面声明一个空字符串将遍历出来的值去接收

在循环内创建的标签以及图片路径

在循环外面进行打印查看是否获取在获取到之后插入到ul标签中

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">测试 通过jQuery中ajax获取数据</button>
    <ul class="list"></ul>
  </body>
</html>
<script src="../js/jquery.js"></script>
<script>
  $("#btn").click(function () {
    $.ajax({
      url: "http://localhost:3000/banner",
      type: "get",
      dataType: "json",
      success: function (result) {
        let data = result.banners;
        console.log(data);
        let srcList = "";
        $.each(data, function (index, item) {
          srcList += "<li> <img src=" + item.imageUrl + " /></li>";
        });
        console.log(srcList);
        $(".list").html(srcList);
      },
    });
  });
</script>

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=78

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。