美文网首页
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