会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132452个问题
JAVA 全系列/第八阶段:Linux入门到实战/Linux(旧) 19036楼
WEB前端全系列/第五阶段:前后端交互/PHP、数据库编程与设计 19041楼
JAVA 全系列/第一阶段:JAVA 快速入门/JAVA入门和背景知识 19042楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/1封装自定义练习.js"></script>
    <style>
        .fenye span{
            border: 1px solid  #ccc;
            padding: 3px 5px ;
            margin-right: 5px;
            cursor: pointer;
        }
        .fenye  span.active{
            /*点击的事件*/
            border: none;
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
<ul  id="list"></ul>
<div class="fenye">
</div>
<script>
    window.beixiAjax({
        type:'get',
        url:'5分页.php',
        success:function (res) {
            console.log(res);//得到了从数据库拿出的数组
            console.log(res[0].title);//拿到小猪环游记
            var div=document.querySelector('.fenye');
            //当前页
            var  nowindex=1;
            //每页显示的条数
            var  num=5;
            //获取总的页数
            var zong=Math.ceil(res.length/5);
            console.log(zong);
            //创建上一页点击按钮
            var upPage=document.createElement('span');
            upPage.innerHTML='上一页';
            div.appendChild(upPage);
            //创建每一页的页码
            for(i=1;i<=zong;i++){
                var pageNum=document.createElement('span');
                pageNum.innerHTML=i;
                div.appendChild(pageNum);
            }
            //创建下一页点击按钮
            var nextPage=document.createElement('span');
            nextPage.innerHTML='下一页';
            div.appendChild(nextPage);

            //展示五条数据
            creatPage(nowindex);
            var ul=document.querySelector('#list');

            //创建分页函数
            function creatPage(nowindex){
                var spans=document.querySelectorAll('span');
                ul.innerHTML='';//清空列表
                spans[1].className='active';

                for(j=0;j<num;j++){
                    var li=document.createElement('li');
                    li.innerHTML=res[j].title;
                    ul.appendChild(li);
                }
            }

            //给两个按钮绑定敲击事件
            upPage.onclick=function () {
                // console.log(123);//绑定成功
                nowindex--;
                if (nowindex<1){
                    nowindex=1;
                    return;
                }
            }





        }

    })
</script>
</body>
</html>

js文件/1封装自定义练习.js

//封装ajax分析
// 参数模仿jqAjax的格式,也是一个json
//         json中有必要的字段
//       type请求方式、url请求地址、data请求参数、success请求回调
/*function beixiAjax(paramsObj){
    //(1)先处理参数paramsObj,把这个json格式的参数转换成必要的格式
    //a.如果是get请求,将参数拼接到irl后面
    //{...}-> [...]-->join()->url+join()
    //b.如果是post请求,则构建formData参数对象
    //   formData.append(...,...);
    //(2)准备xhr对象,然后实现onreadystatechange
    xhr.onreadystatechange=function(){};
    //(3)准备方送
    // xhr.open(...,...,true);
    //(4)发送请求
    if(paramsObj.type=='get'){xhr.send(null)}
    else if(paramsObj.type=='post'){xhr.send(formData)}
}*/
//自执行函数   function test(){}  test()
(function () {
    function beixiAjax(paramsObj) {
        //处理参数
        // console.log(paramsObj.type);//get
        if (paramsObj.type.toLowerCase()=='get'){
            // console.log(paramsObj.data);//是一个对象
            var arr=[];
            for (var pro in paramsObj.data){
                var str=pro+'='+paramsObj.data[pro];
                // console.log(str);
                arr.push(str);
            }
            // console.log(arr);//["username=test-beixi", "password=123123"]
            var canshuStr=arr.join('&');
            // console.log(canshuStr[0]);//u
            // console.log(canshuStr);//username=test-beixi&password=123123
            paramsObj.url+=canshuStr[0]=='?'
                ?'&'+canshuStr
                :'?'+canshuStr;
            // console.log(paramsObj.url);//1.封装自定义Ajax.html?_ijt=bq1u4ufrt92g8s5d33t27ucl3c:30 1.封装自定义Ajax.php?username=test-beixi&password=12312
        }else if (paramsObj.type.toLowerCase()=='post'){
            var  formData=new FormData();
            for (var pro in paramsObj.data){
                formData.append(pro,paramsObj.data[pro]);
            }
            // console.log(formData);//会出现一个空的formData,因为post的特性就是隐藏信息
        }else{
            console.log('请求类型有误');
        }
        //准备xhr对象
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function () {
            if (xhr.readyState==4){
                if (xhr.status==200){
                    //返回信息
                    paramsObj.success(JSON.parse(xhr.responseText));
                }
            }
        };

        //预定url地址
        xhr.open(paramsObj.type,paramsObj.url,true);

        //发送请求
        if(paramsObj.type.toLowerCase()=='get'){
            xhr.send(null);
        }else if (paramsObj.type.toLowerCase()=='post'){
            xhr.send(formData);
        }else{
            console.log('请求类型有误');
        }

    }
    //通过window对象进行绑定
    window.beixiAjax=beixiAjax;
}());

php文件:5分页.php

<?php
   $con=new PDO('mysql:host=localhost;dbname=beixidb;port=3306;charset=utf8','root','');
   $res=$con->query('select * from news');
   if($res){
       $data=$res->fetchAll(PDO::FETCH_ASSOC);
       echo json_encode($data);
     }else{
        echo '这里没有数据';
       }

?>




老师,您好,我的错误应该在这几行,把这几行代码删掉,数据库是连进来的,能够读取数据

//展示五条数据
            creatPage(nowindex);
            var ul=document.querySelector('#list');

            //创建分页函数
            function creatPage(nowindex){
                var spans=document.querySelectorAll('span');
                ul.innerHTML='';//清空列表
                spans[1].className='active';

                for(j=0;j<num;j++){
                    var li=document.createElement('li');
                    li.innerHTML=res[j].title;
                    ul.appendChild(li);
                }
            }

我想要清空ul列表(不知道js用什么方法清空元素),之后给span标签添加active类

之后报错

image.png


WEB前端全系列/第六阶段:Http服务与Ajax模块(旧)/Http服务与Ajax编程 19043楼
JAVA 全系列/第五阶段:JavaWeb开发/Servlet技术详解 19044楼
JAVA 全系列/第五阶段:JavaWeb开发/Servlet技术详解(旧) 19045楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/网络编程 19047楼
Python 全系列/ 第十四阶段:自动化操作办公软件、邮件、定时任务等/自动化操作办公软件、邮件、定时任务等 19049楼
Python 全系列/第一阶段:Python入门/控制语句 19050楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637