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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
jQuery 选择器、DOM操作、事件、动画
Nov 25 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
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中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
python操作MySQL数据库具体方法
2013/10/28 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
Django日志及中间件模块应用案例
2020/09/10 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
餐饮加盟计划书
2014/01/10 职场文书
阿德的梦教学反思
2014/02/06 职场文书
记帐员岗位责任制
2014/02/08 职场文书
《画》教学反思
2014/04/14 职场文书
村庄环境整治方案
2014/05/15 职场文书
医院义诊活动总结
2014/07/04 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
优秀大学生自荐信
2015/03/26 职场文书
销售经理岗位职责范本
2015/04/02 职场文书