快捷導(dǎo)航

Ajax實現(xiàn)不刷新取最新商品

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

本文主要介紹了Ajax 實現(xiàn)不刷新取最新商品的方法。具有很好的參考價值，下面跟著小編一起來看下吧

話不多說，請看代碼：

<?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提交過來 然后根據(jù)它來取數(shù)據(jù)~ 
 $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輸出內(nèi)容 雖然它沒echo 但也是輸出在網(wǎng)頁的內(nèi)容 所以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 的內(nèi)容

<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 接收的內(nèi)容放入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：根據(jù)輸入的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);     //把數(shù)組轉(zhuǎn)成一個json 格式~~ 
?>

HTML端的內(nèi)容

<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 格式數(shù)據(jù)轉(zhuǎn)成JS的對象！ 
    inputs[1].value = data.goods_name; 
    inputs[2].value = data.goods_number; 
    inputs[3].value = data.shop_price; 
   } 
  } 
  xhr.send(null) //經(jīng)常漏寫了~~~不寫是發(fā)送不了請求的~~一定要寫！ 
 } 
</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>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: