Ajax实现不刷新取最新商品


Posted in Javascript onMarch 01, 2017

话不多说,请看代码:

<?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','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端的内容

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
用一段js程序来实现动画功能
Mar 06 Javascript
33种Javascript 表格排序控件收集
Dec 03 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
Angular1.x复杂指令实例详解
Mar 01 #Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 #Javascript
Angular1.x自定义指令实例详解
Mar 01 #Javascript
轻松学习Javascript闭包
Mar 01 #Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 #Javascript
node.js实现回调的方法示例
Mar 01 #Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 #Javascript
You might like
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
介绍Python中的文档测试模块
2015/04/28 Python
Python中的random()方法的使用介绍
2015/05/15 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
python如何基于redis实现ip代理池
2020/01/17 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
优秀研究生主要事迹
2014/06/03 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
护理自荐信
2019/05/14 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript