您的位置：首页 > 其它

Ajax 实现不刷新取最新商品

2016-01-20 09:43 447 查看

<?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
plain copy

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
plain copy

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" 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航