Ajax实现不刷新取最新商品

话不多说,请看代码:

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

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

(0)

相关推荐

  • jquery ajax多次请求数据时 不刷新问题的解决方法

    jquery的ajax在频繁请求数据,或者重复请求数据的时候出现了一个情况,那就是非ie浏览器正常,ie浏览器会设置缓存,导致第二次请求的时候不会刷新,系统报304 not modify, 解决方案: jquery的ajax方法提供配置参数:cache,(只需将属性设置为false即可) 详细: cache:Boolean 默认: true, dataType为"script"和"jsonp"时默认为false如果设置为 false ,浏览器将不缓存此页面. 以上就

  • JavaScript基于Ajax实现不刷新在网页上动态显示文件内容

    本文实例讲述了JavaScript基于Ajax实现不刷新在网页上动态显示文件内容的方法.分享给大家供大家参考.具体如下: 下面的JS代码是一个最基础的JS的ajax实现,可以动态显示服务器上的文件ajax_info.txt文件的内容 <!DOCTYPE html> <html> <head> <title>sharejs.com</title> <script> function loadXMLDoc() { var xmlhttp;

  • ajax的分页查询示例(不刷新页面)

    既然是分页查询,那么就要有张数据很多的表,可以让它进行分页显示,用普通的方法进行分页查询必然是要刷新页面的,这里要实现不刷新页面进行分页显示数据,就要用到ajax方式.进行编写代码 (1)先写个显示数据的页面,分页查询需要那几个部分呢? 1.首先是查询的文本框输入,还有查询按钮,那么就开始写代码吧 <div> <input type="text" id="key" /> //输入查询字的文本框 <input type="but

  • Ajax实现不刷新取最新商品

    话不多说,请看代码: <?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,

  • python制作爬虫爬取京东商品评论教程

    本篇文章是python爬虫系列的第三篇,介绍如何抓取京东商城商品评论信息,并对这些评论信息进行分析和可视化.下面是要抓取的商品信息,一款女士文胸.这个商品共有红色,黑色和肤色三种颜色, 70B到90D共18个尺寸,以及超过700条的购买评论. 京东商品评论信息是由JS动态加载的,所以直接抓取商品详情页的URL并不能获得商品评论的信息.因此我们需要先找到存放商品评论信息的文件.这里我们使用Chrome浏览器里的开发者工具进行查找. 具体方法是在商品详情页点击鼠标右键,选择检查,在弹出的开发者工具界

  • 基于jquery ajax 用户无刷新登录方法详解

    Ajax框架就是提供模块化实现Ajax功能的集合,Ajax框架可以是各种语言实现的(比如SAJAX有各种语言的实现),Ajax只是jquery中的一部分, 实例1 复制代码 代码如下: $.ajax({ type:'post',//可选get url:'action.php',//这里是接收数据的PHP程序 data:'data='dsa',//传给PHP的数据,多个参数用&连接 dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script html

  • Ajax实现无刷新分页实例代码

    今天我们要用ajax做一个分页: 实现Ajax分页: 如果可以的话加上查询条件 找一张表做分页 分页不使用page类 页面不用刷新 Ajax加载数据 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="jquery-1.11.2.

  • ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题

    在做ajax页面无刷新添加的时候,IE下遭遇Ajax缓存,因为刚开始并不知道IE有这个坏毛病,折腾好久,终于解决问题. 总结一下解决办法: 在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱,[即get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端,而post方式因为参数的不同,不会产生这个问题]而FF下不会出现这种情况.为了不受缓存影响,可以这样做: IE访问策略: Internet选项--浏览历史记录--设置-- Int

  • php+ajax实现无刷新分页

    本文实例讲述了php+ajax实现无刷新分页实现方法.分享给大家供大家参考.具体如下:     limit  偏移量,长度;     limit  0,7;   第一页     limit  7,7;   第二页     limit  14,7;  第三页 每页信息条数:7 信息总条数:select count(*) from table 信息总页数:ceil向上取整(总条数/每页条数) 1.分页类具体使用 <?php class Pagination { private $total; //数

  • PHP+Ajax实现无刷新分页实例详解(附demo源码下载)

    本文实例讲述了PHP+Ajax实现无刷新分页的方法.分享给大家供大家参考,具体如下: 注:这里使用到的一些类库在前面文章都能找到源代码,因此为了缩短文章篇幅,都指明链接所在. 本文讲解内容为: Ajax 实现无刷新分页.实现原理.代码展示.代码下载. 这里需要说明一些知识: 1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.php)?还是静态页面(.html/

  • Python如何抓取天猫商品详细信息及交易记录

    本文实例为大家分享了Python抓取天猫商品详细信息及交易记录的具体代码,供大家参考,具体内容如下 一.搭建Python环境 本帖使用的是Python 2.7 涉及到的模块:spynner, scrapy, bs4, pymmssql 二.要获取的天猫数据 三.数据抓取流程 四.源代码 #coding:utf-8 import spynner from scrapy.selector import Selector from bs4 import BeautifulSoup import ran

  • SpringBoot项目执行脚本 自动拉取最新代码并重启的实例内容

    gitPullThenRestart.sh # 日期: 20191230 # 作者: 何鹏举 # 说明: 项目部署在阿里云上, 每次编译打包上传比较麻烦, 因此编写此脚本, 用于应用内可以点击按钮进行自动重启. # 备注: 1) 阿里云的插件也是需要每次上传到OSS再启动, 上传的jar包比较大(大部分是第三方依赖), 感觉不好 # 2) 使用jenkins, 就一个项目再去搭建一套jenkins, 必要性也不是很大 # 以下代码中 /root/hekele 为git clone的项目路径, /

  • 在Thinkphp中使用ajax实现无刷新分页的方法

    在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +---------------------------------------------------------------------- // | ThinkPHP [ WE CAN DO IT JUST THINK IT ] // +---------------------------------------------------------------

随机推荐