租房子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>
修改页面:
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>
列表页:
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> '; 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> '; 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> '; 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>
处理页面:
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 }