Ajax之深入了解

最新推荐文章于 2021-08-06 04:13:26 发布

YZiAngel

最新推荐文章于 2021-08-06 04:13:26 发布

阅读量361

点赞数

分类专栏：前端工程师文章标签： ajax nodejs

本文链接：https://blog.csdn.net/YZi_Angel/article/details/52389045

版权

前端工程师专栏收录该内容

52 篇文章 0 订阅

订阅专栏

    上一节，我们说了一些Ajax的基础知识，包括常用的get方法，现在，我们接着来讲讲post方法，以及利用get方法或post方法实现分页显示的功能。
    我们使用的是nodejs，去nodejs官网下载安装后，在webstrom编写代码，将所有代码放在public文件夹里，然后在terminal控制台开启服务（npm start），之后在网页上输入localhost:3000/文件名.html。
    以下我们来说说get和post两种方法的区别。详见代码

<script>
    //get方法
    //创建Ajax对象
    var xhr = new XMLHttpRequest();
    //创建链接
    xhr.open('get','/getcity?city='+city.value);
    //发送请求
    xhr.send();
    //接收返回值
    xhr.onreadystatechange = function(e){
        if(xhr.readyState == 4){//完成
            if(xhr.status == 200){//成功
                alert(xhr.response)
            }
        }
        e.preventDefault();
    };
    //get方法
    //创建Ajax对象
    var xhr = new XMLHttpRequest();
    //创建链接
    xhr.open('post','/postcity');
    //添加请求头
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    //发送请求
    xhr.send('city='+city.value);
    //接收返回值
    xhr.onreadystatechange = function(e){
       if(xhr.readyState == 4 && xhr.status == 200){
           alert(xhr.response);
       }
       e.preventDefault();     
    };      
</script>

作为前端程序员，后台的数据我们很少涉足，但是有些接口还是需要了解一些，毕竟，前端和后台的分解不是那么明显，下面我们简单的写两个接口比较、了解一下。

//get
router.get('/getcity',function(req, res, next){
  var city = [{value:'beijing', name:'北京'},{value:'shanghai', name:'上海'}];
  res.send(city);
  res.end();
});

//post
router.post('/postcity',function(req, res, next){
  var city = req.body.city;
  console.log(city);
  res.send('您选择的城市是'+city);
  res.end();
});

以上就是对Ajax的小小总结，接下来我们来写一个分页显示的实例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        a{
            text-decoration: none;
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            text-align: center;
            margin: 5px;
            color: red;
        }
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
<div id="box">
</div>
</body>
<script src="../routes/data1.js"></script>
<script>

    var size = 10;
    document.body.addEventListener('click',function(e){
        var e = e || event;
        if(e.target.tagName == 'A'){

            getData(parseInt(e.target.innerText));
        }
        e.preventDefault();
    });
    getData(1);
    function getData(index){
        var xhr = new XMLHttpRequest();
        xhr.open('get','/song?index='+index+'&size='+size);
        xhr.responseType = 'json';
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                doResult(xhr.response);
            }

        };
        xhr.send();
    }
    function doResult(data){
        var json = data;
        var html = '';
        for(var i = 1; i <= json.count; i++){
            html += '<a href="javascript:;">'+ i +'</a>'
        }
        var box = document.getElementById('box');
        box.innerHTML = html;
        var ul = document.createElement('ul');
        box.appendChild(ul);
        json.data.forEach(function(item){
            var li = document.createElement('li');
            li.innerHTML = '<img src="'+ item.cimgurl +'"/>';
            ul.appendChild(li);
        })

    }
</script>
</html>

后台接口

router.get('/song', function(req, res, next){
  var index = req.query.index;
  var size = req.query.size;
  var count = travel.length/size;
  console.log(index +''+ size);
  var dataPage = travel.slice((index -1)*size, index * size);
  res.contentType('application/json');
  res.send({allrecord:travel.length,count:count,data:dataPage,index:index});
  res.end();
});

图片资源是一个单独的文件夹，由于内容太多，这里我就不再上传，有兴趣的同学可以自己试试哦

YZiAngel

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax之深入了解

上一节，我们说了一些Ajax的基础知识，包括常用的get方法，现在，我们接着来讲讲post方法，以及利用get方法或post方法实现分页显示的功能。我们使用的是nodejs，去nodejs官网下载安装后，在webstrom编写代码，将所有代码放在public文件夹里，然后在terminal控制台开启服务（npm start），之后在网页上输入localhost:3000/文件名.html。
复制链接

扫一扫

专栏目录