Ajax实现不刷新取最新商品

更新时间：2017年03月01日 14:26:08 作者：632855323gjp

本文主要介绍了Ajax 实现不刷新取最新商品的方法。具有很好的参考价值，下面跟着小编一起来看下吧

话不多说，请看代码：

<?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的定时器
这篇文章主要为大家介绍了JavaScript的定时器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
js判断ie版本号的简单实现代码
本篇文章主要是对js判断ie版本号的简单实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-03-03
Web前端开发之水印、图片验证码
这篇文章主要介绍了Web前端开发之水印、图片验证码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-11-11
JS如何修改数组对象的Key和指定的值
这篇文章主要介绍了JS如何修改数组对象的Key和指定的值,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-10-10
超出JavaScript安全整数限制的数字计算BigInt详解
这篇文章给大家分享了超出JavaScript安全整数限制的数字计算BigInt的相关知识点，有兴趣的朋友参考学习下。
2018-06-06
javascript实现无缝上下滚动特效
这篇文章主要介绍了javascript实现无缝上下滚动特效的相关资料,需要的朋友可以参考下
2015-12-12
JavaScript Length 属性的总结
javascript length属性是返回字符串的字符数目，length可以返回function的参数数目。接下来，通过本篇文章给大家介绍javascript length属性，对javascript length属性感兴趣的朋友可以参考下本篇文章
2015-11-11
学习Javascript面向对象编程之封装
这篇文章主要帮助大家学习Javascript面向对象编程之封装，由浅入深的介绍了封装的概念定义，感兴趣的小伙伴们可以参考一下
2016-02-02
用JS生成UUID的方法实例
下面小编就为大家带来一篇用JS生成UUID的方法实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-03-03
JavaScript构建自己的模板小引擎示例
这篇文章主要介绍了JavaScript构建自己的模板小引擎,结合实例形式分析了javascript自定义模板引擎的实现与使用方法,需要的朋友可以参考下
2018-12-12