zoukankan      html  css  js  c++  java
  • 处理ajax数据;数据渲染(细节)

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

    什么是 AJAX ?

    AJAX = 异步 JavaScript 和 XML。

    AJAX 是一种用于创建快速动态网页的技术。

    通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

    有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

    //            ajax模板  数据的处理
                $.ajax({
                    method: 'POST', //POST GET
                    url: window.BASE_URL + 'api/v1/coupon/getcoupons', //地址
                    contentType: 'application/x-www-form-urlencoded',
                    async: true, //异步true 同步false
                    dataType: "json",
                    data: {
                        parameter: 1,
                    },
                    success: function(data) {
                        console.log("成功");
                        var html = ''
                        //先判断  防止数据为空
                        if(data.data != null && data.data.promotionList != null && data.data.promotionList.length != 0) {
    //                        处理数据
                            html = data
                        } else {
                            //数据不存在  要在页面显示数据为空  用户体验度很重要                    1
                            html += '<div style="background: #fff;" class="nodata" style="display: none;">' +
                                '<p style="text-align: center; line-height: 40px; font-size: 12px;">没有相关的数据</p>' +
                                '</div>'
                            //                        2
                            html += '<div style="background: #F4F4F4;" class="nodata" style="display: none;">' +
                                '<img style=" 100%; display: block; height: auto; max- 100%;" src="https://s10.mogucdn.com/p2/161213/upload_74hhee883cbf190e3di6cljk23679_514x260.png"/>' +
                                '<p style="text-align: center; line-height: 40px; font-size: 12px;">没有相关的数据</p>' +
                                '</div>'
                        }
                    },
                    error: function(e) {
                        //接口错误,要提示出来,早发现,早修复
                        console.log("服务器错误");
                    }
                });
  • 相关阅读:
    线程高并发
    29(套接字)就是网络编程
    28线程
    27 枚举
    26静态导入和可变参数
    25JDK新特性
    25断言 assert关键字
    24单元测试 junit
    炫酷CSS
    PHP 汉字转拼音类
  • 原文地址:https://www.cnblogs.com/lipengze/p/11429502.html
Copyright © 2011-2022 走看看