Ajax异步刷新局部页面的小李子
看到下面那幅图没有,我们要的是当点击确定以后,根据条形码搜索出商品信息,并且异步刷新右边页面:
再来个小李子:
这个页面呢,就是输入ICCID信息之后,鼠标离开input框之后,立即刷新认证信息填写表单,当然都是用Ajax,区别仅是触发jQuery事件的方式不同;
HTML:
- <table class="splr_table" width="100%" cellpadding="0" cellspacing="0">
- <tr>
- <td align="right">按条形码搜索:</td>
- <td>
- <input class="pp_text" type="text" name="" value="{$info.bar_code}" id="txtBarcode" style="float: left;" />
- <input class="tj-button" onclick="search_bar_code({$info.goods_id})" type="button" id="btnMatch" value="确定" />
- </td>
- </tr>
Ajax:
- function search_bar_code(id)
- { //根据条形码搜索商品信息
- var bar_code = parseInt($('#txtBarcode').val());
- $.ajax({
- url:"{:U('Goods/search_bar_code')}",
- type:'post',
- dataType:'json',
- data:{'id':id,'bar_code':bar_code},
- success:function(res){
- if(res.notice == 'ok' && res.html){
- $('#goodsForm').html(res.html);
- }else{
- alert(res.notice);
- }
- }
- });
- }
然后就是接口函数:
- <?php
- namespace Supplier\Controller;
- use Think\Controller;
- class GoodsController extends CommonController {
- /* 根据条形码找出商品信息 */
- function search_bar_code()
- {
- if(IS_AJAX){
- $input = I('post.');
- $id = intval($input['id']);
- $bar_code = intval($input['bar_code']);
- $service_id = $_SESSION['service_site']['service_id'];
- $g = D('goods');
- $info = $g->where("bar_code = $bar_code")->find();
- $res = array('notice'=>'ok');
- if($info){
- $date = date('Y-m-d',time());
- $path = C('UNLINK_PATH').$date.'/';
- if(!file_exists($path)){
- mkdir($path); //如果不存在图片目录则创建
- }
- $tmp_img = array();
- for($i = 1;$i < 7;$i++){
- $f_name = 'thumb'.$i;
- if(array_key_exists($f_name,$info) && $info[$f_name]){ //如果取出的商品有图片则进行copy
- $old_img = C('UNLINK_PATH').$info[$f_name];
- if(file_exists($old_img)){
- $tmp = explode('.',$old_img);
- $ext = end($tmp);
- $new_img = uniqid().'.'.$ext;
- $f = copy($old_img,($path.$new_img));
- if($f){ //如果复制成功则记录新的图片
- $tmp_img[$f_name] = $date.'/'.$new_img;
- $info[$f_name] = $tmp_img[$f_name];
- }else{
- $this->log_add(array('content'=>'根据条形码搜索','des'=>'复制图片出错'));
- }
- }
- }
- }
- if(count($tmp_img) > 0){ //更新商品图片信息
- $f = $g->where("goods_id = $id")->save($tmp_img);
- if(!$f){
- $this->log_add(array('content'=>'根据条形码搜索','des'=>'保存图片信息出错'));
- }
- }
- $info['goods_id'] = $id;
- //取出供应商与栏目列表start
- $c = D('Category');
- $category_1 = $c->where('parent_id = 0')->select();
- $this->assign('category_1',$category_1);
- if($info['category_1']){
- $this->assign('category_2',$c->where('parent_id = %d',$info['category_1'])->select());
- if($info['category_3']){
- $this->assign('category_3',$c->where('parent_id = %d',$info['category_2'])->select());
- }
- }
- //取出供应商与栏目列表end
- $this->assign('info',$info);
- $html = $this->fetch('goods_ajax');
- $res['html'] = $html;
- }else{
- $res['notice'] = '没有该条形码信息';
- }
- $this->ajaxReturn($res,'JSON');
- }
- }
- }
- $html = $this->fetch('goods_ajax');
- 其实这句话才是关键,他是将局部页面(需要异步刷新的部分)整个fetch(display呢就是将HTML页面代码获取过来并输出,而fetch呢就是将代码获取过来但是并不做输出)然后将整个页面的代码作为json数据($res['html'] = $html;)传输过去。
Ajax异步刷新局部页面的小李子的更多相关文章
- 【转】【Asp.Net】了解使用 ASP.NET AJAX 进行局部页面更新
简介Microsoft的 ASP.NET 技术提供了一个面向对象.事件驱动的编程模型,并将其与已编译代码的优势结合起来.但其服务器端的处理模型仍存在技术本身所固有的几点不足: 进行页面更新需要往返服务 ...
- js异步刷新局部页面
真不想说博客园的Markdown编辑器,我发表到我的个人博客上多好看的一篇文章,发到博客园上格式就成这个鸟样了,哎,不发现到博客首页了,就个人存个档吧 最近在做一个异步刷新页面中的局部,这样做可以防出 ...
- jQuery实现AJAX定时刷新局部页面实例
本篇文章通过两种方法实例讲解ajax定时刷新局部页面,当然方法有很多种,也可以不使用ajax来刷新页面,可以使用jquery中的append来给指定内容加东西,但是都不太实用,最实用的方法还是ajax ...
- Ajax初步实现页面局部内容更替
类似于QQ邮箱的那种局部页面跳转,单页应用常用到,目前很多网页都是这种,但是弊端就是一次加载过多资源,首次加载卡出翔啊
- ASP.NET MVC如何在页面加载完成后ajax异步刷新
背景:之前已写过两篇有关Ajax的随笔,这一篇是单独针对在页面加载完成的Ajax操作.比如说打开学生列表页面,先加载页面,然后以Ajax的方式,从数据库中检索相应的学生信息,给浏览者更好的体验. 简单 ...
- Ajax异步刷新地址栏url改变(利用Html5 history.pushState实现)
早些时候在博客园参阅了不少资料,然后决定入驻博客园分享自己的开发心得,最近准备转方向筹备着辞职交接工作,所以有点忙碌,搁置了一个月才匆匆写下这么一篇随笔,希望能给大家带来一点帮助吧,资料和学识有限,如 ...
- ajax 异步刷新
第一种方法,ajax实现:当然,ajax使用起来确实很简单就可以实现,但是里面的很多知识还是比较有点深的.我之前做页面时间自动刷新的功能就是用的ajax.完整代码是:1.getTime.php: 复制 ...
- 【SSH网上商城项目实战28】使用Ajax技术局部更新商品数量和总价
转自: https://blog.csdn.net/eson_15/article/details/51487323 昨天把项目部署了一下,玩了玩,今天完善了一下购物车中修改商品数量就能局部 ...
- Ajax+Js局部刷新
通过 AJAX,JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信.通过这个对象, JavaScript 可在不重载页面的情况与 Web ...
随机推荐
- $.ajax()引发的对Deferred的总结
传统的ajax写法: $.ajax({ url:"1.json", type:"get", success:function(data){}, error:fu ...
- Sqoop导数据出现的问题
sqoop导数据卡住在INFO mapreduce.Job: Running job: job_1447835049223_0010 查yarn日志全是: INFO org.apache.hadoop ...
- Spring 配置文件详解 http://www.blogjava.net/hellxoul/archive/2011/11/19/364324.html
1.基本配置: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http: ...
- android softinput 相关
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN | WindowManager.Layo ...
- 缓存之Redis
Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorte ...
- windows 服务的启动与安装
在使用windows 操作系统时,我们对windows服务再也熟悉不过了,这些服务有的是系统层的,有的是应用层的,大部分都是运行在桌面的后台,可以在进程中看到,有时候在做web项目时,在站点启动时要启 ...
- 既约分数-phi
Description 小明正在学习分数这一章,他想知道对于一个真分数b/a而言,当分母a在[2,N]之间时,存在多少个既约分数,例如当N=4时,有以下几个1/2,1/3,1/4,2/3,3/4这五个 ...
- Puppet安装与配置简介(附视频教程)
Puppet是一种Linux平台的集中配置管理系统,他可管理配置文件.用户.cron任务.软件包.系统服务等.puppet把这些系统实体称之为资源,puppet采用C/S星状的结构,所有的客户端和一个 ...
- Leetcode049. Group Anagrams
//hashmap implement with STL class Solution { public: vector<vector<string>> groupAnagra ...
- jQuery之Nestable
空间属性置顶: 属性 说明 change 事件,当控件改变时触发 nestable 方法,获取顺序JSON数据,形式如下: [{"id":1},{"id":2} ...