Ajax 实现不刷新取最新商品

发布时间：2020-12-15 20:58:44 所属栏目：百科来源：网络整理

导读：?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 = 'sele

<?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','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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!