php+ajax+mysql用异步获取方法实现后台数据显示在前端并获取正文数据和完成上下分页

最新推荐文章于 2022-10-23 15:10:15 发布

心酱儿

最新推荐文章于 2022-10-23 15:10:15 发布

阅读量3k

点赞数 1

分类专栏： php 文章标签： ajax mysql php

本文链接：https://blog.csdn.net/wbx_wlg/article/details/53541090

版权

php 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近因为项目需要所以了解一下ajax异步获取的方法，现在把自己整理的代码贴出来，方便以后回顾和大家技术交流。
一：连接数据库文件：conn.php

<?php 

    /********连接数据库公用文件***********/
    header("Content-Type:text/html;charset=utf8");//申明编码方式
    $conn=mysql_connect("localhost","root"," ") or die("数据库连接错误".mysql_error());//连接数据库,替换成自己的数据库用户名和密码
    mysql_select_db("aaa",$conn);//连接数据表
    mysql_query('SET NAMES utf8') or('字符集设置错误'.mysql_error());//设置字符集编码
   if (!get_magic_quotes_gpc()) //php中$_GET与$_POST过滤sql注入
    {
        if (!empty($_GET))
        {
            $_GET  = addslashes_deep($_GET);
        }
        if (!empty($_POST))
        {
            $_POST = addslashes_deep($_POST);
        }
            $_COOKIE   = addslashes_deep($_COOKIE);
            $_REQUEST  = addslashes_deep($_REQUEST);
    }
    function addslashes_deep($value)
    {
        if (empty($value))
        {
            return $value;
        }else
        {
        return is_array($value) ? array_map('addslashes_deep', $value) : addslashes($value);
        }
    }
?>

二：php服务端提供给前端ajax数据接口：phptoAjax

<?php   
    require_once("conn.php");//导入公共连接数据库文件
    $id = $_POST['id'];//获取前端所提供的栏目ID值
    $query=mysql_query("SELECT * FROM tdt_archives where typeid = {$id} order by pubdate desc limit 0,10") or die("错误提示：".mysql_error());//这里设置以倒序的方法读取十组数据
    $jsonArray=array();//新建数据用于接收数据库每行对应的数据组
    while($rows=mysql_fetch_array($query))
    {
        $rows['title'];
        $rows['pubdate'] = date("Y-m-d",$rows['pubdate']); //转换日期格式
    //  $rows['description']=mb_substr(strip_tags(htmlspecialchars_decode($rows['description'])),0,100,"utf-8");
        array_push($jsonArray,$rows);     //把数据库的内容添加到新建数组中
    }
    echo json_encode($jsonArray); //转换成json传递给前端
?>

三：前端页面 list.htm

<!-- 前端文件-->
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1" />
<title>php+mySQL+Ajax实例</title>
</head>
<body>
<style>
body{margin:0px;padding:0px;font-family:'微软雅黑';font-size:16px;color:#333;}
ul,li{margin:0px;padding:0px; list-style:none; font-style:normal;}
a{ text-decoration:none;color:inherit}
.main{width:90%;margin:0 auto;}
.more{color:#999;font-size:14px;float:right}
.news-tit{font-weight:bold;line-height:27px;padding-top:10px;}
#list li{line-height:27px;font-size:15px;border-bottom:1px solid #eee;padding:10px 0px;}
.widget-list-link:hover{ color:#F90}
.more-mark{float:right}
</style>
<div class="main">
    <div><span class="news-tit">新闻动态</span><span class="more">更多</span></div>
    <div class="list-wrap">
        <ul id="list"><!--获取的数据列表展示在这里--></ul>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script>
    $(function(){
        var id =14;//设置所调取的栏目id
        $.ajax({
            url:'php/phptoAjax.php',//连接获取数据的php接口文件
            dataType:'json',//接收格式
            type:'POST',    //传递方法
            data:{id:id},//获取ID数据
            success:function(msg){ //成功之后执行
            var id=$(this).val();
            var ul = "";
            for(var i= 0;i<4;i++){ //这里我限制的四个，不限制的话可以这样写i<msg.length;
                    ul += "<li class='list'><a href='php/phpArticle.php?art="+msg[i]['id']+" 'class='widget-list-link'>" + msg[i]['title']+"<i class='more-mark'>"+">>"+"</i></a></li>";
                } 
                    $("#list").html(ul);

            },
            error:function(){   //失败执行
                console.log("链接错误") ;
            }
        });
    });

</script>

</body>
</html>

这时候列表就显示在前端对应的位置上：
这里写图片描述

四：点击列表展开文章正文内页带有上下篇分页：phpArticle.php

<?php
    require_once("conn.php");
    $id = $_GET['art'];   //接收前端上传的数据，此处为文章的id值
//  $query=mysql_query("SELECT * FROM tdt_archives  WHERE id = '$id'") or die("文章错误:".mysql_error()); //查询一个表里的数据
    $query=mysql_query("select  tdt_archives.title,tdt_archives.pubdate,tdt_archives.litpic,tdt_addonarticle.body from tdt_archives,tdt_addonarticle where tdt_archives.id ='$id' and tdt_addonarticle.aid='$id'") or die("文章错误:".mysql_error());//因为新闻的正文和标题、发布时间不在一个表里，所有这里使用合并两个表进行条件查询
    if($rows=mysql_fetch_array($query)){
        $rows['title'];
        $rows['litpic'];
        $rows['pubdate'] = date("Y-m-d",$rows['pubdate']);
        $rows['body'] ;
    }
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1" />
<title><?php echo $rows['title']?></title>
</head>
<body>
    <div class="artical-main">
        <div class="content">
            <p class="title"><?php echo ($rows['title'])?></p><!-- 如果想控制标题字数则使用下列方法<?php  echo strlen($rows['title'])>30? substr($rows['title'],0,30).'...':$rows['title'] ;  ?>-->
            <p class="time"><?php echo ($rows['pubdate'])?></p>
           <p class="text"><?php echo ($rows['body'])?></p>
        </div>
    </div>

 <?php 
    $sql_former = "select * from tdt_archives where id<$id order by id desc "; //上一篇
    $sql_later = "select * from tdt_archives where id>$id "; //下一篇
    $queryset_former = mysql_query($sql_former); //执行sql语句
    if(mysql_num_rows($queryset_former))//返回记录数，并判断是否为真，以此为依据显示结果
    { 
        $result = mysql_fetch_array($queryset_former);
        echo "<p class='pagelist'>上一篇: <a href='phpArticle.php?art=$result[id]'> ". $result['title']." </a></p>";
    } else {
        echo "<p class='pagelist'>上一篇: 没有了</p>";}
    $queryset_later = mysql_query($sql_later);
    if(mysql_num_rows($queryset_later))
    {
        $result = mysql_fetch_array($queryset_later);
        echo "<p class='pagelist' style='margin-bottom:20px;'>下一篇: <a href='phpArticle.php?art=$result[id]'> ". $result['title']."</a><br></p>";
    } else {
        echo "<p class='pagelist' style='margin-bottom:20px;'>下一篇: 没有了</p>";} 
?>

</body>
</html>