Ajax Realizes Fetching the Latest Products without Refreshing
- 2021-07-24 10:15:22
- OfStack
Without saying much, please look at the code:
<?php
$conn = mysql_connect('localhost','root','123456') or die(' Connection failed ');
mysql_select_db('ecshop');
mysql_query('set names utf8');
$attr = isset($_GET['attr'])?$_GET['attr']:'is_hot'; // By html Adj. ajax Submit it Then take the data according to it ~
$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 What is received is php Output content Although it didn't echo But it is also the content output on the web page So ajax Be able to receive ~~ ! ! !
<tr><td> Commodity ID</td><td> Commodity name </td><td> Commodity prices </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>
Content of 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; // Put from php The received content is put into INNERHTML
}
}
xhr.send();
}
</script>
</head>
<body>
<input type="button" value=" Latest merchandise " onclick="top3('is_new');">
<input type="button" value=" Hot-selling merchandise " onclick="top3('is_hot');">
<input type="button" value=" Boutique merchandise " onclick="top3('is_best');">
<div id="test">
</div>
</body>
Example 2: Get commodity information according to the entered ID and modify it
<?php
$conn = mysql_connect('localhost','root','123456') or die(' Connection failed ');
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))){ // Return if you can't get the goods false
echo ' There is no such product! ';
exit;
}
echo json_encode($goods); // Convert an array to 1 A json Format ~~
?>
Content of HTML side
<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 +')') // Put the received json Format data conversion to JS Object of!
inputs[1].value = data.goods_name;
inputs[2].value = data.goods_number;
inputs[3].value = data.shop_price;
}
}
xhr.send(null) // I often miss it ~~~ You can't send a request without writing ~~1 Be sure to write!
}
</script>
</head>
<body>
<h1> Commodity editor </h1>
Commodity id:<input type="text" name="goods_id" onfocus="al()" onblur="modify();" /><br /> <span></span>
Commodity name :<input type="text" name="goods_name" /><br />
Commodity inventory :<input type="text" name="goods_number" /><br />
Commodity prices :<input type="text" name="shop_price" /><br />
<input type="submit" value=" Modify " />
</body>