Ajax实现不刷新取最新商品

2019-11-19 17:22:32

字体：大中小

来源：转载

供稿：网友

话不多说，请看代码：

<?php  $conn = mysql_connect('localhost','root','123456') or die('连接失败');  mysql_select_db('ecshop');  mysql_query('set names utf8');  $attr = isset($_GET['attr'])?$_GET['attr']:'is_hot';  //由html 的ajax提交过来 然后根据它来取数据~  $sql = 'select goods_name,goods_id,shop_price from goods where '.$attr.' = 1 limit 0,3';  $rs = mysql_query($sql,$conn);  //var_dump($rs);  $goods = array();  while($row = mysql_fetch_assoc($rs)){   $goods[] = $row;  }  //print_r($goods); ?>

<table border='1'> //ajax 接收的就是 php输出内容 虽然它没echo 但也是输出在网页的内容 所以ajax 能接收~~！！！ <tr><td>商品ID</td><td>商品名称</td><td>商品价格</td></tr> <?php foreach($goods as $v){ ?>  <tr>   <td><?php echo $v['goods_id'];?></td>   <td><?php echo $v['goods_name'];?></td>   <td><?php echo $v['shop_price'];?></td>  </tr> <?php }?> </table>

HTML 的内容

<script>  var xhr = new XMLHttpRequest();  function top3(attr){   var url = 'goods.php?attr=' + attr;   xhr.open('get',url);   xhr.onreadystatechange = function (){    if(xhr.readyState ==4){     var dobj = document.getElementsByTagName('div')[0].innerHTML = xhr.responseText; //把从php 接收的内容放入INNERHTML    }   }   xhr.send();  } </script> </head> <body>   <input type="button" value="最新商品" onclick="top3('is_new');">   <input type="button" value="热卖商品" onclick="top3('is_hot');">   <input type="button" value="精品商品" onclick="top3('is_best');">   <div id="test">   </div> </body>

实例2：根据输入的ID 获取商品信息并修改

<?php $conn = mysql_connect('localhost','root','123456') or die('连接失败');  mysql_select_db('ecshop');  mysql_query('set names utf8');  $id = isset($_GET['id'])?$_GET['id']:1;  if($id==''){   $error['num'] = 1;   $error['msg'];  }  $sql = 'select goods_id,goods_name,shop_price,goods_number from goods where goods_id ='.$id;  $rs = mysql_query($sql);  if(!($goods = mysql_fetch_assoc($rs))){  //获取不到商品就返回false   echo '没有该商品！';   exit;  }  echo json_encode($goods);     //把数组转成一个json 格式~~ ?>

HTML端的内容

<script>  var xhr = new XMLHttpRequest();  function modify(){   var inputs = document.getElementsByTagName('input')   var gid = inputs[0].value;   var url = 'search.php?id='+ gid；  xhr.open('get',url);   xhr.onreadystatechange = function (){    if(xhr.readyState ==4){     var data = eval('('+ xhr.responseText +')') //把接收到的json 格式数据转成JS的对象！     inputs[1].value = data.goods_name;     inputs[2].value = data.goods_number;     inputs[3].value = data.shop_price;    }   }   xhr.send(null) //经常漏写了~~~不写是发送不了请求的~~一定要写！  } </script> </head> <body> <h1>商品编辑</h1>   商品id:<input type="text" name="goods_id" onfocus="al()" onblur="modify();" /><br /> <span></span>   商品名称:<input type="text" name="goods_name" /><br />   商品库存:<input type="text" name="goods_number" /><br />   商品价格:<input type="text" name="shop_price" /><br />   <input type="submit" value="修改" /> </body>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：Javascript仿京东放大镜的效果

下一篇：Angular1.x复杂指令实例详解