小型网站不使用vue框架如何实现数据渲染到前端页面

最新推荐文章于 2026-03-12 00:16:42 发布

原创最新推荐文章于 2026-03-12 00:16:42 发布 · 1.3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍如何利用Ajax发送异步请求至指定URL，并通过JSONP跨域获取数据。示例代码展示了使用jQuery库进行get请求的具体方法，及在请求成功后如何将返回的数据绑定到HTML元素上，实现页面的动态更新。

1，先写ajax请求

eg：

<script src="jquery.min.js"></script>
<script>
   $(function(){
       var xhrul='http://192.168.31.133:3000/jdapi';
       $.ajax({
          type:'get',
           async:false,
           url:xhrul,
           cache:false,
           dataType:"jsonp",
           success:function(json){
              console.log(json);
           },
           err:function(e){
               alert("error")
           }
       })
   })
</script>

2，在success里写数据绑定(只是示例，不全)

success:function(json){
   console.log(json);
   var html=''; //定义变量
   $("#climit li").html(""); //选中标签
   $(json.categorys).each(function(i,categorys){  //json.categorys的categorys是数据咯的最外面那个数组，each循环遍历
       html+='<li class="relative">......</li>（html内容）';
       html+='<p>......</p>';
       $(categorys.categoryItems).each(function(i,categoryItems){
           html+='';
       })
   })
},

采用对象的形式取值