美文网首页
Html中用Ajax获取数据源

Html中用Ajax获取数据源

作者: 欣_m | 来源:发表于2019-08-05 18:37 被阅读0次

1.$.ajax()get方法获取数据

function getActivityData() {

        $.ajax({

          url: "https://ys.lumingx.com/api/gem/getActivityList",

          type: "get",

          data:{},

          success: function(res){  //res是服务器端返回客户端的数据

            if(res && res.success){

                bindData(res.data);//res.data 实参 是数据源中的data对象 }

                                           }

     });

 }

2.绑定函数

result[i].ActivityProduct 数据都是在ActivityProduct对象里的。这里如何不对,数据源中的数据就不会显示在网页,报错:undefined:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

function bindData(data){//data是形参 即res.data

            var result = data;

            var str = "";

            var picture = document.getElementsByClassName("picture-list")[0];

            var picture1 = document.getElementsByClassName("picture-list1")[0];

            for (var i = 0; i < result.length; i++) {

                str += '<li>' +

                    '<div class="mini-img">' +

                    '<a href="' +result[i].ActivityProduct.PcUrl + '">' +

                    '<img src="' + result[i].ActivityProduct.ImagePath + '" alt= "活动图片" />' +

                    '<span id="from-shanghai">' +

                    '<p>' + result[i].ActivityProduct.LeavePortCityName + '&nbsp;出发 </p>' +

                    '<p>&nbsp;&nbsp;' +result[i].ActivityProduct.TravelMode + '</p>' +

                    '</span>' +

                    '<span id="description1">' +result[i].ActivityProduct.MainTitle + '</span>' +

                    '</a></div>' +

                    '<div class="details">' +

                    '<span id="description2">' + result[i].ActivityProduct.SubTitle + '</span>' +

                    '<span id="money">' +

                    '<span id="price">' +result[i].ActivityProduct.WebPrice + '元起' + '</span>' + '<br/>' +

                    '<span id="words">暑期大促&nbsp;双人立减' + result[i].ActivityProduct.DiscountAmount + '<span>' +

                    '</span></div></li>'

            }

            picture.innerHTML = str;

            picture1.innerHTML = str;

        }

总结:数据源对象一定要取正确

相关文章

网友评论

      本文标题:Html中用Ajax获取数据源

      本文链接:https://www.haomeiwen.com/subject/qvhvdctx.html