Ajax 实现不刷新取最新商品

最新推荐文章于 2021-08-05 20:24:20 发布

午夜玫瑰钻

最新推荐文章于 2021-08-05 20:24:20 发布

阅读量319

点赞数

分类专栏：前端Javascript相关操作说明文章标签： javascript ajax 分页

本文链接：https://blog.csdn.net/gujinapenggu5/article/details/50546420

版权

前端Javascript相关操作说明专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<?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 的内容

[html]view plaincopy 
    
print?
 <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端的内容

[javascript]view plaincopy 
    
print?
 <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" οnfοcus="al()"  οnblur="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>  

午夜玫瑰钻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax 实现不刷新取最新商品

$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
复制链接

扫一扫

专栏目录