zoukankan      html  css  js  c++  java
  • 租房子ajax

    首页:

    <?php
    //连接数据库
    $db = new MySQLi('localhost','root','123','php0307');
    !mysqli_connect_error() or die('连接错误');
    $db->query('set names utf8');
    
    if(isset($_GET['id'])){
        //删除语句
        $sql = "delete from h_house where id=".$_GET['id'];
        //执行sql语句
        $res = $db->query($sql); 
    }
    //mysql语句
    $sql = "select * from h_house";
    // 执行mysql语句
    $res = $db->query($sql);
    //变成一个二维数组
    $arr = $res->fetch_all();
    ?>
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>列表页</title>
    </head>
    <body>
    <table width="100%" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <th>操作</th>
            <th>关键字</th>
            <th>区域</th>
            <th>使用面积</th>
            <th>租金</th>
            <th>租赁类型</th>
            <th>房屋类型</th>
        </tr>
        <?php foreach($arr as $v){ ?>
          <tr>
                <td>
                <a href="addmid.php?id=<?php echo $v[0] ?>">编辑</a>
                <a href="manage.php?id=<?php echo $v[0] ?>">删除</a>
            </td>
            <td><?php echo $v[1]; ?></td>
            <td><?php echo $v[2]; ?></td>
            <td><?php echo $v[3]; ?></td>
            <td><?php echo $v[4]; ?></td>
            <td><?php echo $v[5]; ?></td>
            <td><?php echo $v[6]; ?></td>
          </tr>
    <?php }?>
    </table>
    <a href="addmid.php"><button>添加</button></a>
    </body>
    </html>
    View Code

    修改页面:

     1 <?php
     2 //连接数据库
     3 $db = new MySQLi('localhost','root','123','php0307');
     4 !mysqli_connect_error() or die('连接错误');
     5 $db->query('set names utf8');
     6 //设一边变量为false
     7 $flag = false;
     8 //判断是否获取到了$_GET['id']
     9 if(isset($_GET['id'])){
    10     //当获取到值的时候为true
    11     $flag = true;
    12     //mysql语句 让id 等于 穿过来的id
    13     $sql = "select * from h_house where id=".$_GET['id'];
    14     $res = $db->query($sql);
    15     $arr = $res->fetch_row();
    16 }
    17 if(isset($_POST['keyword'])){//判断是否有提交
    18     $keyword = $_POST['keyword'];//关键字
    19     $area = $_POST['area'];//区域
    20     $sqmeter = $_POST['sqmeter'];//使用面积
    21     $rent = $_POST['rent'];//租金
    22     $rentType = $_POST['rentType'];//租赁类型
    23     $housetype = $_POST['housetype'];//房屋类型
    24     //判断是否提交 或者 不为空
    25 if(isset($_POST['id']) && $_POST['id'] != ""){
    26         //修改语句
    27         $sql = "update h_house set keyword='$keyword',area='$area',sqmeter='$sqmeter',rent='$rent',rentType='$rentType',housetype='$housetype' where id=".$_POST['id'];
    28         $res = $db->query($sql);
    29     //添加
    30     }else{
    31         $sql = "insert into h_house(keyword,area,sqmeter,rent,rentType,housetype) values('$keyword','$area','$sqmeter','$rent','$rentType','$housetype')";
    32         $res = $db->query($sql);
    33     }
    34 }
    35 ?>
    36 <!doctype html>
    37 <html>
    38 <head>
    39 <meta charset="utf-8">
    40 <title>无标题文档</title>
    41 </head>
    42 <body>
    43 <form action="addmid.php" method="post">
    44   <input type="hidden" name="id" value="<?php echo $flag ? $arr[0] : "" ?>">
    45     <table width="260" cellpadding="0" cellspacing="0">
    46         <tr>
    47             <td>关键字:</td>
    48             <td><input name="keyword" value="<?php echo $flag ? $arr[1] : "" ?>"</td>
    49         </tr>
    50         <tr>
    51             <td>区域:</td>
    52             <td><input name="area" value="<?php echo $flag ? $arr[2] : "" ?>"</td>
    53         </tr>
    54         <tr>
    55             <td>使用面积:</td>
    56             <td><input name="sqmeter" value="<?php echo $flag ? $arr[3] : "" ?>"</td>
    57         </tr>
    58         <tr>
    59             <td>租金:</td>
    60             <td><input name="rent" value="<?php echo $flag ? $arr[4] : "" ?>"</td>
    61         </tr>
    62         <tr>
    63             <td>租赁类型:</td>
    64             <td><input name="rentType" value="<?php echo $flag ? $arr[5] : "" ?>"</td>
    65         </tr>
    66         <tr>
    67             <td>房屋类型:</td>
    68             <td><input name="housetype" value="<?php echo $flag ? $arr[6] : "" ?>"</td>
    69         </tr>
    70         <tr>
    71             <td colspan="2">
    72                 <button>插入</button>
    73                 <a href="manage.php">返回</a>
    74             </td>
    75         </tr>
    76     </table>
    77 </form>
    78 </body>
    79 </html>
    View Code

    列表页:

      1 <!doctype html>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <title>列表页</title>
      6 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
      7 </head>
      8 <body>
      9     区域:<div id="area"></div>
     10     租赁类型:<div id="rent"></div>
     11     房屋类型:<div id="house"></div>
     12     关键字:<input type="text" name="kwd"><br>
     13     <button onClick="addEvent()">查询</button>
     14 <table id="tabl" width="100%" border="1" cellpadding="0" cellspacing="0">
     15 </table>
     16 </body>
     17 </html>
     18 <script>
     19 $(function(){
     20     //发起ajax请求数据 
     21     ajaxFun();
     22 })
     23 function addEvent(){
     24     //创建对象
     25     var xhr = new XMLHttpRequest();
     26     //post的传值方式   创建请求
     27     xhr.open('post','chuli.php?type=query');
     28     //post传值得加头信息
     29     xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
     30     var quyu = '';    //区域
     31     var rent = '';//租赁类型
     32     var house = '';//房屋类型
     33     var kwd = '';//关键字
     34     var info = '';//传值
     35     $('input[name="area"]:checked').each(function(){
     36         quyu += $(this).val()+"','";
     37     })
     38     $('input[name="rent"]:checked').each(function(){
     39         rent += $(this).val()+"','";
     40     })
     41     $('input[name="house"]:checked').each(function(){
     42         house += $(this).val()+"','";
     43     })
     44     kwd = $('input[name="kwd"]').val();
     45     //让他们相等 赋值给info
     46     info = "area="+quyu+"&rent="+rent+"&house="+house+"&kwd="+kwd;
     47     //发送请求
     48     xhr.send(info);
     49     //监听ajax状态
     50     xhr.onreadystatechange = function(){
     51         //判断当他满足条件状态等于4的时候 数据是ajax数据全部返回
     52         if(xhr.readyState == 4){
     53             //定义一个变量把返回值赋值给他
     54             var data = xhr.responseText;
     55             //处理数据
     56             listFun(data);
     57         }
     58     }
     59 }
     60 /* 发起ajax请求数据  区域 租赁类型 房屋类型 房源列表*/
     61 function ajaxFun(){
     62     //创建对象
     63     var xhr = new XMLHttpRequest();
     64     //监听ajax状态
     65     xhr.onreadystatechange = function(){
     66         //判断 当他满足条件状态等于4的时候 数据ajax数据全部返回
     67         if(xhr.readyState == 4){
     68             //定义一个变量把返回值赋值给他
     69             var data = xhr.responseText;
     70             //处理数据
     71             chuiliData(data);
     72         }
     73     }
     74     //get传值 带个参数type=init 让php页面接收
     75     xhr.open('get','chuli.php?type=init');
     76     //发送请求
     77     xhr.send(null);
     78 }
     79 /*处理返回数据*/
     80 function chuiliData(data){
     81     //定义一个变量来接收数组并以@拆分
     82     var arr = data.split('@');
     83     //区域
     84     areaFun(arr[0]);
     85     //租赁类型
     86     rentFun(arr[1]);
     87     //房屋类型 
     88     houseFun(arr[2]);
     89     //房源列表
     90     listFun(arr[3]);
     91 }
     92 //区域的内容
     93 function areaFun(data){
     94     //定义一个变量接收数组 并以^拆分
     95     var arr = data.split('^');
     96     //定义一个变量为空
     97     var str = '';
     98     //循环 数组
     99     for(var i=0;i<arr.length;++i){
    100         // 建input type为checkbox 加了一个label在点击文字的时候也可以选中 赋值给str
    101         str += '<label><input type="checkbox" name="area" value="'+arr[i]+'">'+arr[i]+'</label>&nbsp;&nbsp;';
    102     }
    103     //找到id我area的div 让他的内容为str
    104     $('#area').html(str);
    105 }
    106 //租赁类型的内容
    107 function rentFun(data){
    108     var arr = data.split('^');
    109     var str = '';
    110     for(var i=0;i<arr.length;++i){
    111         str += '<label><input type="checkbox" name="rent" value="'+arr[i]+'">'+arr[i]+'</label>&nbsp;&nbsp;';
    112     }
    113     $('#rent').html(str);
    114 }
    115 //房屋类型的内容
    116 function houseFun(data){
    117     var arr = data.split('^');
    118     var str = '';
    119     for(var i=0;i<arr.length;++i){
    120         str += '<label><input type="checkbox" name="house" value="'+arr[i]+'">'+arr[i]+'</label>&nbsp;&nbsp;';
    121     }
    122     $('#house').html(str);
    123 }
    124 //房源列表的内容
    125 function listFun(data){
    126     //定义一个变量接收并以^开芬
    127     var arr = data.split('^');
    128     var str = `<tr>
    129                 <th>关键字</th>
    130                 <th>区域</th>
    131                 <th>使用面积</th>
    132                 <th>租金</th>
    133                 <th>租赁类型</th>
    134                 <th>房屋类型</th>
    135                </tr>`;
    136     //循环数组
    137     for(var i=0;i<arr.length;++i){
    138         //定义一个变量 吧数组里面的内容以逗号拆分
    139         var brr = arr[i].split(',');
    140         //标签拼接 开头
    141         str += '<tr>';
    142         //循环从1开始
    143         for(var j=1;j<brr.length;++j){
    144             //捣鼓一个td标签 拼接上循环出来的内容
    145             str += '<td>'+brr[j]+'</td>';
    146         }
    147         //标签拼接 结尾
    148         str += '</tr>';
    149     }
    150     //找到id为tabl的table 让他的内容等于str
    151     $('#tabl').html(str);
    152 }
    153 </script>
    View Code

    处理页面:

     1 <?php
     2 //连接数据库
     3 $db = new MySQLi('localhost','root','123','php0307');
     4 !mysqli_connect_error() or die('连接错误');
     5 $db->query('set names utf8');
     6 
     7 $type = $_GET['type'];
     8 switch($type){
     9 //type 穿的第一个参数
    10     case 'init':
    11             //区域
    12             $sql = "select distinct area from h_house";
    13             $res = $db->query($sql);
    14             $arrone = $res->fetch_all();
    15             //租赁类型
    16             $sql = "select distinct rentType from h_house";
    17             $res = $db->query($sql);
    18             $arrtwo = $res->fetch_all();
    19             //房屋类型
    20             $sql = "select distinct housetype from h_house";
    21             $res = $db->query($sql);
    22             $arrthree = $res->fetch_all();
    23             //房源列表
    24             $sql = "select * from h_house";
    25             $res = $db->query($sql);
    26             $arrfour= $res->fetch_all();
    27             // 区域  租赁类型   房屋类型  房源列表
    28             echo arrToString($arrone)."@".arrToString($arrtwo)."@".arrToString($arrthree)."@".arrToString($arrfour);
    29         break;
    30 //type 穿的第二个参数
    31     case 'query':
    32         $area = $_POST['area'];//区域
    33         $rent = $_POST['rent'];//租赁类型
    34         $house = $_POST['house'];//房屋类型
    35         $kwd = $_POST['kwd'];//关键字
    36         
    37         $str = "where 1=1 ";
    38         if($area != ""){
    39             //去掉 拼接的','
    40             $area = substr($area,0,-3);
    41             $str .= " and area in ('$area') ";
    42         }
    43         if($rent != ""){
    44             $rent = substr($rent,0,-3);
    45             $str .= " and rentType in ('$rent') ";
    46         }
    47         if($house != ""){
    48             $house = substr($house,0,-3);
    49             $str .= " and houseType in ('$house') ";
    50         }
    51         if($kwd != ""){
    52             $str .= " and keyword like '%$kwd%' ";
    53         }
    54         $sql = "select * from h_house $str";
    55         $res = $db->query($sql);
    56         $arr= $res->fetch_all();
    57         echo arrToString($arr);
    58         break;        
    59 }
    60 function  arrToString($arr){
    61     $str = '';
    62     foreach($arr as $k=>$v){
    63         foreach($v as $vv){ 
    64             $str .= $vv.",";
    65         }
    66         $str = substr($str,0,-1);
    67         $str .= '^';
    68     }
    69     $str = substr($str,0,-1);
    70     return $str;
    71 }
    View Code
  • 相关阅读:
    HTML5基础
    行为类型11-11:状态模式(State Pattern)
    行为类型11-10:中介者模式(MediatorPattern)
    行为类型11-9:责任链模式(Chain of Responsibility Pattern)
    行为类型11-8:模板模式(Template Pattern)
    行为类型11-7:命令模式(Command Pattern)
    行为类型11-6:解释器模式(Interpreter Pattern)
    FTP 连接失败,防火墙端口设置
    Windows下 NodeJs 版本管理 Nvm
    Ubuntu vi 方向键不正常问题
  • 原文地址:https://www.cnblogs.com/xzz123-/p/9041713.html
Copyright © 2011-2022 走看看