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í)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
微信小程序web-view不支持打開非業(yè)務(wù)域名https?//XXXX?請重新配置的解決辦法
小程序現(xiàn)在日漸成熟,功能也越來越強大,我們今天來一起看看小程序跳轉(zhuǎn)H5頁面的問題,下面這篇文章主要給大家介紹了關(guān)于微信小程序web-view不支持打開非業(yè)務(wù)域名https?//XXXX?請重新配置的解決辦法,需要的朋友可以參考下2022-08-08Javascript中call和apply函數(shù)的比較和使用實例
這篇文章主要介紹了Javascript中call和apply函數(shù)的比較和使用實例,本文試圖用更加清晰簡單的思路來分析解釋這兩個函數(shù),需要的朋友可以參考下2015-02-02讓iframe自適應(yīng)高度(支持XHTML,支持FF)
讓iframe自適應(yīng)高度(支持XHTML,支持FF)...2007-07-07JavaScript 以對象為索引的關(guān)聯(lián)數(shù)組
我們常說JavaScript原生支持json,因為我們可以認(rèn)為json就是對JavaScript的Object對象的靈活應(yīng)用。2010-05-05js實現(xiàn)翻頁后保持checkbox選中狀態(tài)的實現(xiàn)方法
在項目中有需求如下:上下分頁后,選中的checkbox狀態(tài)保持不變2012-11-11