租房子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
原文地址:https://www.cnblogs.com/xzz123-/p/9041713.html