简单租房子实例详解---（session、ajax、json前后台数据处理、分页）

本次实例我们结合session、ajax、json前后台数据处理、分页技术做一个租房信息系统

一共有五个界面：包括

管理员和用户的登录界面

登录界面的后台

<?php
session_start();
$uid=$_POST["uid"];
$pwd=$_POST["pwd"];
$db = new MySQLi("localhost","root","","z_0705");
!mysqli_connect_error() or die("数据库连接错误");
$db->query("set names utf8");//设置编码格式
$sql = "select * from user_admin";
$res = $db->query($sql);//执行语句
$arr = $res->fetch_all();//返回结果集
//var_dump($arr);
//登陆成功判断
//遍历结果集 根据前台传过来的信息进行判断
$tag=0;
$user="";
$uname="";
foreach ($arr as $k1=>$v1){
    if($uid==$v1[0]&&$pwd==$v1[1]){//如果用户名和密码都与后台数据库对应
        $tag=1;//tag的值为1
        $user=$uid;
        $uname=$v1[2];
        $_SESSION["uname"]=$uname;//获取登陆者姓名
        break;
    }

}
//登录成功判断
if ($tag==1){//如果tag值为1，则表示登录成功
    if($user=="1001"){
        echo $uname.'登录成功';//提示登录成功
        header('Refresh: 1;url=../html/admin-index.html');
        //在1秒后并将登录者的id信息以get的方式传送并跳转到主页
    }
    else{
        echo $uname.'登录成功';//提示登录成功
        header('Refresh: 1;url=../html/index.html');
        //在1秒后并将登录者的id信息以get的方式传送并跳转到主页
    }
}
if ($tag==0){
    echo $uname.'登录失败';
    header('Refresh: 1;url=../html/login.html');
}

管理员信息管理页面

管理员信息管理js代码

// JavaScript Document
$(function(){//页面加载完成
    ajaxFun();//调用ajax方法获取后台数据

})
/*连接后台数据库获取数据*/
function ajaxFun(){
        $.ajax({
           url:"../dell/admin-index.php",//连接后台的地址
          type:"post",//定义数据的传输方式
          data:{type:"getData"},//向后台发送的数据
          success:function(data){//连接成功后接收后台的数据
             var arr=eval(data);
              //console.log(arr);
              addHtml(arr);
          }
        });
}

function addHtml(arr){//向网页内部添加内容的方法
    var str=``;
    for(var i in arr){
        str+=`<tr>
                <td>
                <button data="`+arr[i][0]+`" class="layui-btn layui-btn-normal" onClick="change(this)">修改</button><button data="`+arr[i][0]+`" class="layui-btn layui-btn-danger" onClick="del(this)">删除<button>
                </td>
                <td>`+arr[i][1]+`</td>
                <td>`+arr[i][2]+`</td>
                <td>`+arr[i][3]+`</td>
                <td>`+arr[i][4]+`</td>
                <td>`+arr[i][5]+`</td>
                <td>`+arr[i][6]+`</td>
            </tr>`;
        //console.log(arr[i][1]);
    }
    $("#tab").append(str);
}

/*点击删除事件*/
function del(obj){
    var id=$(obj).attr("data");
    //console.log(id);
    $.ajax({
          url:"../dell/admin-index.php",//连接后台的地址
          data:{id:id,type:"del"},//向后台发送的数据
          success:function(data){//连接成功后接收后台的数据
             $(obj.parentElement).parent().remove();
          }

    });
}
/*点击修改事件*/
function change(obj){
    var id=$(obj).attr("data");
    $.ajax({
          url:"../dell/admin-alter.php",//连接后台的地址
          type:"post",//定义数据的传输方式
          data:{id:id,type:"save"},//向后台发送的数据
          success:function(data){//连接成功后接收后台的数据
             location.href="admin-alter.html";
          }

    });
}

/*点击添加事件*/
function add(){
    location.href="admin-update.html";
}

PHP后台代码：

<?php
$db = new MySQLi("localhost","root","","z_0705");
!mysqli_connect_error() or die("数据库连接错误");
$db->query("set names utf8");//设置编码格式
$type=$_REQUEST["type"];
switch($type){
      case'getData':
            $sql = "select * from house";
            $res = $db->query($sql);//执行语句
            $arr = $res->fetch_all();//返回结果集
            echo json_encode($arr);//输出整理好的结果集
          break;
       case'del':
            $id=$_REQUEST["id"];
            $sql = "delete from house where id={$id}";
            $res = $db->query($sql);//执行语句
          break;
       case'insert':
            $KeyWord=$_REQUEST["KeyWord"];
            $Area=$_REQUEST["Area"];
            $SquareMeter=$_REQUEST["SquareMeter"];
            $Rent=$_REQUEST["Rent"];
            $RentType=$_REQUEST["RentType"];
            $HouseType=$_REQUEST["HouseType"];
            $str1="keyword,area,squaremeter,rent,renttype,housetype";
            $str2="'$KeyWord','$Area','$SquareMeter','$Rent','$RentType','$HouseType'";
            $sql = "insert into house ($str1) values($str2)";
            //echo $sql;
            $res = $db->query($sql);//执行语句
            header("location:../html/admin-index.html");
          break;

}

管理员信息添加页面

管理员信息修改页面

// JavaScript Document
$(function(){
    ajaxFun();
})

function ajaxFun(){
    $.ajax({
          url:"../dell/admin-alter.php",//连接后台的地址
          type:"post",//定义数据的传输方式
          data:{type:'select'},//向后台发送的数据
          success:function(data){//连接成功后接收后台的数据
              var arr= eval(data);
              //console.log(arr);
              addHtml(arr);
          }
    });
}

function addHtml(arr){
//console.log(arr);
/*var KeyWord=document.getElementById("KeyWord");
    console.log(KeyWord);
    KeyWord.value=arr[1];*/
    $("#id").val(arr[0]);
    $("#KeyWord").val(arr[1]);
    $("#Area").val(arr[2]);
    $("#SquareMeter").val(arr[3]);
    $("#Rent").val(arr[4]);
    $("#RentType").val(arr[5]);
    $("#HouseType").val(arr[6]);
}

<?php
session_start();
$db = new MySQLi("localhost","root","","z_0705");
!mysqli_connect_error() or die("数据库连接错误");
$db->query("set names utf8");//设置编码格式
$type=$_REQUEST["type"];
switch($type){
        case'save':
            if(!empty($_POST)&&$type=='save'){
                $id=$_REQUEST['id'];
                $_SESSION["id"]=$id;
            }
            break;
        case'select':
            $id=$_SESSION["id"];
            $sql = "select * from house where id={$id}";
            //echo $sql;
            $res = $db->query($sql);//执行语句
            $arr = $res->fetch_row();//返回结果集
            echo json_encode($arr);
        break;
        case'insert':
            $id=$_REQUEST["id"];
            $KeyWord=$_REQUEST["KeyWord"];
            $Area=$_REQUEST["Area"];
            $SquareMeter=$_REQUEST["SquareMeter"];
            $Rent=$_REQUEST["Rent"];
            $RentType=$_REQUEST["RentType"];
            $HouseType=$_REQUEST["HouseType"];
    $str1="keyword='$KeyWord',area='$Area',squaremeter='$SquareMeter',rent='$Rent',renttype='$RentType',housetype='$HouseType'";
            $sql = "update house set $str1 where id={$id}";
            $db->query($sql);
        /*    echo $sql;
            die;*/
            header("location:../html/admin-index.html");
        break;
}

用户查询界面

// JavaScript Document

/*定义全局变量*/
var area,zl,fw,kw;
$(function(){//页面加载完成

    ajaxFun();//调用ajax方法获取后台数据（页面的选项，房屋信息内容）

})

/*全选的方法*/
//参数：全选的input对象
function selArea(obj){//本页面全选按钮的点击事件
    var info=$(obj).attr('class');//1.获取全选的class属性值（共有area 租赁类型 房屋类型）
    //alert(info);
    //找区域的选项
    var selected=obj.checked;//2.获取选中按钮的选中状态（若是选中：true 否则：false）
    //alert(selected);
    $('input[data="'+info+'"]').each(function(i){//3.找到所有data属性值和 1 找到的值相同的 input
        /*之后遍历同步该组全选按钮下的多选按钮选择状态*/
        this.checked=selected;
    })
}

/*点击搜索按钮调用的方法*/
function seach(){
    //获取选项值

area="";zl="";fw="";kw="";//定义字符串变量存放要传到后台的值（区域，租赁类型，房屋类型，关键字）
    /*为变量赋值*/
    //方法一
/*$("input[data='area']").each(function(){
    if(this.checked){//如果是选中状态则将该选项的内容存入相应的变量里
        area+=$(this).val()+",";
    }
})
    area=area.substring(0,area.length-1);
    alert(area);
}*/
    //方法二
$("input").each(function(){//找到所有的input标签然后遍历
    var data=$(this).attr("data"),//获取每个input标签的data属性的内容
        info=$(this).val();//获取每个选项的内容
    if(this.checked && data=="area"){//如果多选框的选中状态是被选中的并且 data的值是area 那么
        area+=info+"','";//将其值用"','"拼接存放到事先定义的字符串中
    }
        if(this.checked && data=="zl"){//如果多选框的选中状态是被选中的并且 data的值是zl 那么
        zl+=info+"','";//将其值用"','"拼接存放到事先定义的字符串中
    }
        if(this.checked && data=="fw"){//如果多选框的选中状态是被选中的并且 data的值是zl 那么
        fw+=info+"','";//将其值用"','"拼接存放到事先定义的字符串中
    }
    })
    //由于一开始用"','"来拼接字符串，为了使发送到后台的数据更加实用使sql语句更易编写
    //所以以下操作现在要去除字符串的最后的拼接符号
    area=area.substring(0,area.length-3);
    zl=zl.substring(0,zl.length-3);
    fw=fw.substring(0,fw.length-3);
    kwd=$('#keyword').val();//获取搜索关键字的值

    $.ajax({//定义阿贾克斯的方法向后台发送数据（字符串拼接而成的查询条件）
          url:"../dell/index.php",//连接后台的地址
          type:"post",//定义数据的传输方式
          data:{
              kwd:kwd,
              type:'select',//发送类型为查找
              area:area,
              zl:zl,
              fw:fw
                  },//向后台发送的数据
          dataType:"json",//传送的方式为json格式
          success:function(data){//连接成功后接收后台的数据
              //var arr=eval(data);
             //console.log(data);
              //接收后台的数据
            addHtml(data);//调用添加数据的方法
          }

    });
}

/*ajax方法请求数据*/
function ajaxFun(){
    $.ajax({
           url:"../dell/index.php",//连接后台的地址
          type:"post",//定义数据的传输方式
          data:{type:'getData'},//向后台发送的数据
          success:function(data){//连接成功后接收后台的数据
             var arr=eval(data);
              //console.log(arr);
              addHtml(arr[0]);
              addSel(arr[1],arr[2],arr[3]);
              //console.log(arr[1]);
              //console.log(arr[2]);
              //console.log(arr[3]);
          }
    });
}
/*向网页添加内容的方法*/
function addHtml(arr){
    var str=`<tr>
            <th><b>关键字</b></th>
            <th><b>区域</b></th>
            <th><b>建筑面积/m<sup>2</sup></b></th>
            <th><b>租金/RMB</b></th>
            <th><b>租赁类型</b></th>
            <th><b>房屋类型</b></th>
            </tr>
            `;
    for(var i in arr){
        str+=`<tr>
                <td>`+arr[i][1]+`</td>
                <td>`+arr[i][2]+`</td>
                <td>`+arr[i][3]+`</td>
                <td>`+arr[i][4]+`</td>
                <td>`+arr[i][5]+`</td>
                <td>`+arr[i][6]+`</td>
              </tr>`;
        //console.log(arr[i][1]);
    }
    $("#tab").html(str);
}
/*添加选项的方法*/
function addSel(area,zl,fw){
    var str1=``,
        str2=``,
        str3=``;
    for(var i in area){
        str1+=`<label><input type="checkbox" data="area" value="`+area[i]+`">`+area[i]+`</label>`;
    }
        $("#change1").append(str1);
        str1=``;
    for(var j in zl){
        str2+=`<label><input type="checkbox" data="zl" value="`+zl[j]+`">`+zl[j]+`</label>`;
    }
        $("#change2").append(str2);
        str2=``;
    for(var k in fw){
        str3+=`<label><input type="checkbox" data="fw" value="`+fw[k]+`">`+fw[k]+`</label>`;
    }
        $("#change3").append(str3);
        str3=``;

}
/*点击页码跳页的方法*/
function getData(pnum){
    $.ajax({
          url:"../dell/index.php",//连接后台的地址
          type:"post",//定义数据的传输方式
          data:{pageNum:pnum,type:'getData'},//向后台发送的数据
          dataType:'json',
          success:function(data){//连接成功后接收后台的数据
                 addHtml(data[0]);
                  //console.log(data[0]);
          }

    });

}

<?php
$db = new MySQLi("localhost","root","","z_0705");
!mysqli_connect_error() or die("数据库连接错误");
$db->query("set names utf8");//设置编码格式

$type=$_REQUEST["type"];
$page = 2;
$pageNum = 1;
if($_POST['pageNum']!=""){
    $pageNum =$_POST['pageNum'];
}

switch($type){
      case'getData':
            $sql1 = "select * from house";
            $res1 = $db->query($sql1);//执行语句
            $arr1 = $res1->fetch_all();//返回结果集
            /*定义三个变量存数据*/
            $area=array();
            $zl=array();
            $fw=array();
            foreach($arr1 as $v){
                if(!in_array($v[2],$area)){
                    $area[]=$v[2];
                }
                if(!in_array($v[5],$zl)){
                    $zl[]=$v[5];
                }
                if(!in_array($v[6],$fw)){
                    $fw[]=$v[6];
                }
            }
            //分页
            $count =count($arr1);//数据总量
            $num =round($count/$page);//页数
            $start = ($pageNum-1)*$page;
            $sql2 = "select * from house limit $start,$page";
            $res2 = $db->query($sql2);//执行语句
            $arr2 = $res2->fetch_all();//返回结果集
            echo json_encode(array($arr2,$area,$zl,$fw));
            break;

     case'select'://如果前台发送来的type是select
            //定义变量接收数据
            $kwd=$_POST['kwd'];
            $area=$_POST["area"];
            $zl=$_POST["zl"];
            $fw=$_POST["fw"];
            $term=" where 1=1 ";//查询语句编辑 之所以写where 1=1是因为防止第一个接收的值为空sql语句无法继续执行
            if($area != ""){//如果传来的值非空
                $term .=" and area in ('{$area}') ";//则组织sql语句
            }
            if($zl != ""){//如果传来的值非空
                $term .=" and renttype in ('{$zl}') ";
            }
            if($fw != ""){//如果传来的值非空
                $term .=" and housetype in ('{$fw}') ";
            }
            if($kwd != ""){//如果传来的值非空
                $term .=" and keyword like '%{$kwd}%'";
            }
            $sql = "select * from house ".$term;
            $res = $db->query($sql);//执行语句
            $arr = $res->fetch_all();//返回结果集
            echo json_encode($arr);//向前台发送json格式的数据
            break;
}