ajax概念与运用

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术

ajax技术的目的

是让js发送http请求，实现与服务端通信，即数据交互

ajax的两个主要好处

异步请求
局部刷新(无刷新)
ajax不支持访问本地文件
不支持连接操作数据库
数据接口： ​ 数据接口是后台提供的，是一个url地址，通过访问该url，实现对服务端数据的增删改查操作，服务端一般返回的的数据以json格式封装

ajax请求格式

script>
        $(function () {
            $.ajax({
                // ajax的参数
                // 请求数据的地址：接口地址  名字
                url: '/index_data',
                // 请求数据方式：get  post
                type: 'get',
                // 返回的数据格式  json
                dataType: 'json',
                // data:发送给接口的数据
                success: function (dat) {
                    // 请求成功之后要执行的回调函数
                    // 得到数据，并在页面显示数据
                    console.log(dat) 
                },
                error: function () {
                    // 请求失败
                    alert('请求失败')
                }
            })
        })
    </script>

结合ajax展示后台数据

 <script>
        $(function () {
            $.ajax({
                // ajax的参数
                // 请求数据的地址：接口地址  名字
                url: '/index_data',
                // 请求数据方式：get  post
                type: 'get',
                // 返回的数据格式  json
                dataType: 'json',
                // data:发送给接口的数据
                success: function (dat) {
                    // 请求成功之后要执行的回调函数
                    // 得到数据，并在页面显示数据
                    console.log(dat)  //-- 数组里面字典  -- 循环取数据循环放数据
                    var str = '<tr><th>序号</th><th>股票代码</th><th>股票简称</th><th>涨跌幅</th><th>换手率</th><th>最新价(元)</th><th>前期高点</th><th>前期高点日期</th><th>添加自选</th></tr>'
                    for (var i = 0; i < dat.length; i++) {
                        // dat[i].id  对象名.shuxing
                        str += '<tr><td>' + dat[i].id + '</td><td>' + dat[i].code + '</td><td>全新好</td><td>10.01%</td><td>4.40%</td><td>全新好</td><td>16.05</td><td>2017-07-18</td><td><input type="button" value="添加" name="toAdd"></td></tr> '
                        // 95 个tr
                    }
                    // 放数据  设置table的内容是str
                    $('.table').html(str)
                },
                error: function () {
                    // 请求失败
                    alert('请求失败')
                }
            })
        })
    </script>