看到下面那幅图没有,我们要的是当点击确定以后,根据条形码搜索出商品信息,并且异步刷新右边页面:

再来个小李子:

这个页面呢,就是输入ICCID信息之后,鼠标离开input框之后,立即刷新认证信息填写表单,当然都是用Ajax,区别仅是触发jQuery事件的方式不同;

HTML:

  1. <table class="splr_table" width="100%" cellpadding="0" cellspacing="0">
  2. <tr>
  3. <td align="right">按条形码搜索:</td>
  4. <td>
  5. <input class="pp_text" type="text" name="" value="{$info.bar_code}" id="txtBarcode" style="float: left;" />
  6. <input class="tj-button" onclick="search_bar_code({$info.goods_id})" type="button" id="btnMatch" value="确定" />
  7. </td>
  8. </tr>

Ajax:

  1. function search_bar_code(id)
  2. { //根据条形码搜索商品信息
  3. var bar_code = parseInt($('#txtBarcode').val());
  4. $.ajax({
  5. url:"{:U('Goods/search_bar_code')}",
  6. type:'post',
  7. dataType:'json',
  8. data:{'id':id,'bar_code':bar_code},
  9. success:function(res){
  10. if(res.notice == 'ok' && res.html){
  11. $('#goodsForm').html(res.html);
  12. }else{
  13. alert(res.notice);
  14. }
  15. }
  16. });
  17. }

然后就是接口函数:

  1. <?php
  2.  
  3. namespace Supplier\Controller;
  4. use Think\Controller;
  5.  
  6. class GoodsController extends CommonController {
  7. /* 根据条形码找出商品信息 */
  8. function search_bar_code()
  9. {
  10. if(IS_AJAX){
  11. $input = I('post.');
  12. $id = intval($input['id']);
  13. $bar_code = intval($input['bar_code']);
  14. $service_id = $_SESSION['service_site']['service_id'];
  15. $g = D('goods');
  16. $info = $g->where("bar_code = $bar_code")->find();
  17. $res = array('notice'=>'ok');
  18. if($info){
  19. $date = date('Y-m-d',time());
  20. $path = C('UNLINK_PATH').$date.'/';
  21. if(!file_exists($path)){
  22. mkdir($path); //如果不存在图片目录则创建
  23. }
  24. $tmp_img = array();
  25. for($i = 1;$i < 7;$i++){
  26. $f_name = 'thumb'.$i;
  27. if(array_key_exists($f_name,$info) && $info[$f_name]){ //如果取出的商品有图片则进行copy
  28. $old_img = C('UNLINK_PATH').$info[$f_name];
  29. if(file_exists($old_img)){
  30. $tmp = explode('.',$old_img);
  31. $ext = end($tmp);
  32. $new_img = uniqid().'.'.$ext;
  33. $f = copy($old_img,($path.$new_img));
  34. if($f){ //如果复制成功则记录新的图片
  35. $tmp_img[$f_name] = $date.'/'.$new_img;
  36. $info[$f_name] = $tmp_img[$f_name];
  37. }else{
  38. $this->log_add(array('content'=>'根据条形码搜索','des'=>'复制图片出错'));
  39. }
  40. }
  41. }
  42. }
  43. if(count($tmp_img) > 0){ //更新商品图片信息
  44. $f = $g->where("goods_id = $id")->save($tmp_img);
  45. if(!$f){
  46. $this->log_add(array('content'=>'根据条形码搜索','des'=>'保存图片信息出错'));
  47. }
  48. }
  49. $info['goods_id'] = $id;
  50. //取出供应商与栏目列表start
  51. $c = D('Category');
  52. $category_1 = $c->where('parent_id = 0')->select();
  53. $this->assign('category_1',$category_1);
  54. if($info['category_1']){
  55. $this->assign('category_2',$c->where('parent_id = %d',$info['category_1'])->select());
  56. if($info['category_3']){
  57. $this->assign('category_3',$c->where('parent_id = %d',$info['category_2'])->select());
  58. }
  59. }
  60. //取出供应商与栏目列表end
  61. $this->assign('info',$info);
  62. $html = $this->fetch('goods_ajax');
  63. $res['html'] = $html;
  64. }else{
  65. $res['notice'] = '没有该条形码信息';
  66. }
  67. $this->ajaxReturn($res,'JSON');
  68. }
  69. }
  70. }
  1. $html = $this->fetch('goods_ajax');
  2.  
  3. 其实这句话才是关键,他是将局部页面(需要异步刷新的部分)整个fetchdisplay呢就是将HTML页面代码获取过来并输出,而fetch呢就是将代码获取过来但是并不做输出)然后将整个页面的代码作为json数据($res['html'] = $html;)传输过去。

Ajax异步刷新局部页面的小李子的更多相关文章

  1. 【转】【Asp.Net】了解使用 ASP.NET AJAX 进行局部页面更新

    简介Microsoft的 ASP.NET 技术提供了一个面向对象.事件驱动的编程模型,并将其与已编译代码的优势结合起来.但其服务器端的处理模型仍存在技术本身所固有的几点不足: 进行页面更新需要往返服务 ...

  2. js异步刷新局部页面

    真不想说博客园的Markdown编辑器,我发表到我的个人博客上多好看的一篇文章,发到博客园上格式就成这个鸟样了,哎,不发现到博客首页了,就个人存个档吧 最近在做一个异步刷新页面中的局部,这样做可以防出 ...

  3. jQuery实现AJAX定时刷新局部页面实例

    本篇文章通过两种方法实例讲解ajax定时刷新局部页面,当然方法有很多种,也可以不使用ajax来刷新页面,可以使用jquery中的append来给指定内容加东西,但是都不太实用,最实用的方法还是ajax ...

  4. Ajax初步实现页面局部内容更替

    类似于QQ邮箱的那种局部页面跳转,单页应用常用到,目前很多网页都是这种,但是弊端就是一次加载过多资源,首次加载卡出翔啊

  5. ASP.NET MVC如何在页面加载完成后ajax异步刷新

    背景:之前已写过两篇有关Ajax的随笔,这一篇是单独针对在页面加载完成的Ajax操作.比如说打开学生列表页面,先加载页面,然后以Ajax的方式,从数据库中检索相应的学生信息,给浏览者更好的体验. 简单 ...

  6. Ajax异步刷新地址栏url改变(利用Html5 history.pushState实现)

    早些时候在博客园参阅了不少资料,然后决定入驻博客园分享自己的开发心得,最近准备转方向筹备着辞职交接工作,所以有点忙碌,搁置了一个月才匆匆写下这么一篇随笔,希望能给大家带来一点帮助吧,资料和学识有限,如 ...

  7. ajax 异步刷新

    第一种方法,ajax实现:当然,ajax使用起来确实很简单就可以实现,但是里面的很多知识还是比较有点深的.我之前做页面时间自动刷新的功能就是用的ajax.完整代码是:1.getTime.php: 复制 ...

  8. 【SSH网上商城项目实战28】使用Ajax技术局部更新商品数量和总价

         转自: https://blog.csdn.net/eson_15/article/details/51487323 昨天把项目部署了一下,玩了玩,今天完善了一下购物车中修改商品数量就能局部 ...

  9. Ajax+Js局部刷新

    通过 AJAX,JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信.通过这个对象, JavaScript 可在不重载页面的情况与 Web ...

随机推荐

  1. $.ajax()引发的对Deferred的总结

    传统的ajax写法: $.ajax({ url:"1.json", type:"get", success:function(data){}, error:fu ...

  2. Sqoop导数据出现的问题

    sqoop导数据卡住在INFO mapreduce.Job: Running job: job_1447835049223_0010 查yarn日志全是: INFO org.apache.hadoop ...

  3. Spring 配置文件详解 http://www.blogjava.net/hellxoul/archive/2011/11/19/364324.html

    1.基本配置: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http: ...

  4. android softinput 相关

    getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN | WindowManager.Layo ...

  5. 缓存之Redis

    Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorte ...

  6. windows 服务的启动与安装

    在使用windows 操作系统时,我们对windows服务再也熟悉不过了,这些服务有的是系统层的,有的是应用层的,大部分都是运行在桌面的后台,可以在进程中看到,有时候在做web项目时,在站点启动时要启 ...

  7. 既约分数-phi

    Description 小明正在学习分数这一章,他想知道对于一个真分数b/a而言,当分母a在[2,N]之间时,存在多少个既约分数,例如当N=4时,有以下几个1/2,1/3,1/4,2/3,3/4这五个 ...

  8. Puppet安装与配置简介(附视频教程)

    Puppet是一种Linux平台的集中配置管理系统,他可管理配置文件.用户.cron任务.软件包.系统服务等.puppet把这些系统实体称之为资源,puppet采用C/S星状的结构,所有的客户端和一个 ...

  9. Leetcode049. Group Anagrams

    //hashmap implement with STL class Solution { public: vector<vector<string>> groupAnagra ...

  10. jQuery之Nestable

    空间属性置顶: 属性 说明 change 事件,当控件改变时触发 nestable 方法,获取顺序JSON数据,形式如下: [{"id":1},{"id":2} ...