UCHOME的AJAX分享

最近match001.com项目做一个发送电子喜帖的功能，发现QQ油箱明信片功能差不多。于是乎构思做成那个样子。

有几点需要实现的：

背景图片、结婚相片的加载。
N多的事件绑定
跟相册数据绑定，选择相册列出所有相片，并且相片分页。所有的都AJAX实现
初始化一个DIV用来控制上层图片位置移动，根据不同背景图片，初始化不不同的控制DIV。
JS收集背景图片与相片的相关信息以及他们的位置数据，AJAX到后台处理。根据不同的方式处理，比如 view预览，保存发送等等。

这里针对第三点说说，AJAX得到用户相册数据。

这里需要用到AJAX和数据分页，UCHOME里有两个非常棒的函数。ajaxget()和muti()。

ajaxget(url, showid, waitid);参数url为请求路径（必选参数），showid为AJAX请求后返回内容的显示ID（必选参数），waitid为等待请求时候显示loading...的ID（可选，没这个参数的话默认将showid作为waitid）。

uchome的使用AJAX时候有一个注意地方，刚不了解朋友可能尝试使用如下JS代码处理AJAX:

var x = new('XML', '');

x.get(url, function(s){

//some code;

});

处理返回一个XML或者HTML格式数据，echo 出来后，再用自己用JS控制显示数据。这里要说的是UCHOME经常会碰到一个XML错误的位置。。什么的错误信息，之前我也是这样处理，搞了好久，后来Google搜一把，原来不能简单后台echo输出。后来想到UCHOME李的template函数，于是乎做一个模板，数据PHP后台得到后不做任何处理，跟其他页面一样，存于变量里，在模板里调用就是。至于分页，也一样，UCHOME里multi函数返回的就是一个分页链接。也在模板里处理显示。而前段JS只需要这样：

ajaxget(url, showid);

具体PHP代码如下：

$albumid = ($_GET[albumid]) ? $_GET['albumid'] : '';
  if($albumid == '') exit('error');

  $perpage = 8; //每页要显示的条数
  $page = empty($_GET['page']) ? 1 : intval($_GET['page']);
  if($page<1) $page=1;
  $start = ($page-1)*$perpage;
  ckstart($start, $perpage);
  $wheresql = " albumid='$albumid' AND uid='$space[uid]'";
  $count = $_SGLOBAL['db']->result($_SGLOBAL['db']->query("SELECT COUNT(*) FROM ".tname('pic')." WHERE $wheresql"),0);
  $query = $_SGLOBAL['db']->query("SELECT * FROM ".tname('pic')." where $wheresql limit $start,$perpage");
  while ($row = $_SGLOBAL['db']->fetch_array($query)){
     $pics[] = $row['filepath'];
  }
  $multi = multi($count, $perpage, $page, "wedding.php?do=xitie&action=ajax&m=loadimg&uid=$space[uid]&albumid=$albumid", 'Imgs', 'Link');
  $mod = 'creatpic';
  include_once template('space_xitie_ajax');

模板代码如下：

  <ul id="Pics">
  
  <li οnclick="x.setImg(this)"><img src="attachment/$value" width="75" height="45"/></li>
  
  </ul>
  <div class="page" id="Link">$multi</div>

  <ul id="Pics">
   <li>您相册都还没有呢，赶快去创建相册上传照片吧！</li>
  </ul>
  <div class="page" id="Link">$multi</div>

JS代码如下：

var albumid = $("album").value;
    if(albumid!=''){
     var url = './wedding.php?do=xitie&action=ajax&m=loadimg&albumid='+albumid+'&inajax=1';
     ajaxget(url, 'Imgs');
    }

（以上代码只是一个局部，并不完整）

UCHOME的AJAX分享相关推荐

JQuery中$.ajax()分享
2019独角兽企业重金招聘Python工程师标准>>> HTTP 请求加载远程数据.通过jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$. ...
分享：用promise封装ajax
用promise封装ajax var ajaxOptions = {url: 'url',method: 'GET',async: true,data: null,dataType: 'text', ...
ajax局部刷新后，如何让局部中的百度分享重新加载
我这个人不怎么喜欢说太多话,看几个图你们就懂了 Ajax前 Ajax之后原因分析解决方法收工百度分享是集成了众多主流第三方网站分享和收藏按钮的工具. 通过百度分享轻松将主流第三方网站的分享按钮 ...
java ajax jquery分页插件_分享精心挑选的12款优秀jQuery Ajax分页插件和教程
摘要:这篇jQuery栏目下的"分享精心挑选的12款优秀jQuery Ajax分页插件和教程",介绍的技术点是"jquery_ajax分页插件.jquery_ajax.a ...
ajax不执行_好程序员Java学习路线分享原生Ajax的使用
好程序员Java学习路线分享原生Ajax的使用,首先我们先来看一下什么是 AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX 就是异步.JavaScript ...
微信分享 ajax冲突,微信jssdk分享功能开发及解决ajax跨域的问题
微信JS-SDK说明文档微信JS-SDK Demo 我所要实现的分享功能要求:只要提供一段js代码给前端美工放置在静态页面等就可以实现分享功能. js代码如下: url=location.href; ...
ajax 上传文件实例,Ajax异步上传文件实例代码分享
非常不多说,直接给大家上干货,写的不好还请见谅. 具体代码如下所示: Index $(function() { $(':button').click(function () { var formDat ...
addeventlistener不支持ajax_好程序员web前端学习路线分享了解AJAX是什么
好程序员web前端学习路线分享了解AJAX是什么首先是服务器什么是服务器:咱们的页面来源于服务器:实例(在phpnwo上面存放一个页面), 咱们把页面放在互联网的服务器上,就有了自己的网站了. 1. ...
微信hash ajax,基于vue hash模式微信分享#号的解决
看代码吧~ // 问题描述在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的"#"会被去掉并追加?fromTimeline之类的后缀参数,这就造成了分享出 ...

UCHOME的AJAX分享

UCHOME的AJAX分享相关推荐

最新文章

热门文章