ajax请求:

一、从服务器端请求数据:

var url = '';
url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid='+ appid +'&secret='+ secret +'&code='+ code +'&grant_type=authorization_code';
$.ajax({
type: 'GET',
url: url,
dataType: 'json',
success: function(data){
alert(JSON.stringify(data))
},
error: function(xhr, type){
alert('Ajax error!')
}
});

二、发送数据到服务器

// 参与活动
function joinActivity(msg){
$.ajax({
type: 'GET',
url: 'http://ebsig.mcake.com/ajax-shop/activity/wsj.ajax',
data: { operFlg: 'join', gid: gid, oid:oid, msg: msg},
dataType: 'json',
success: function(data){
if(data.code == 200) {
$('#js_step9').show();
} else {
// 已经参加过
alert(data.message);
}
},
error: function(xhr, type){
alert('Ajax error!')
}
});
}
函数调用:
joinActivity(val);

整体页面js部署:

//初始化设置
var gid = '',
oid = getOid();
$step1 = $('#js_step1'),
$step2 = $('#js_step2'),
$step3 = $('#js_step3'),
$step4 = $('#js_step4'),
$step5 = $('#js_step5'), $step6 = $('#js_step6'),
$step7 = $('#js_step7'),
$step8 = $('#js_step8'),
$step9 = $('#js_step9'),
$step10 = $('#js_step10'),
$step11 = $('#js_step11'),
$step12 = $('#js_step12'),
$step13 = $('#js_step13'),
menTimeer = null; $(function(){
// 初始化weixin 配置
(function initConfig(){
execJs();
})();
// 授权
    function auth(appId){
}
}); function execJs() {
function imgShow(ele){
var i=-1;
var len=ele.children("img").length;
function imgAnimate(){ //设置走光动画
i++;
if(i<len){
setTimeout(function(){
ele.children("img").eq(i).show().siblings().hide();
imgAnimate(); //内部回调
},300);
} }
imgAnimate(); //执行一次动画,否则其他动画不隐藏
}
}
imgShow($("#js_loading"));//立刻执行一次
var timeer = setInterval(function(){imgShow($("#js_loading"))},1200);/*循环执行*/ //loading动画
function imgLoad(ele){} function step1(){
      $step1.hide();
         $step3.show();
    }
function step2(){}
function step3(){} var animation = {
menAnimation: function(){},
cdAnimation: function(){},
zdAnimation: function(){},
sdAnimation: function(){},
}
    // 发起活动
    function initActivity(callback){}
// 查看活动
    function checkActivity(gid){}
    // 参与活动
    function joinActivity(msg){}
    //分享
    function shareWx(url){}   
   (function bindEvent () {
     // 步骤
         $step1.on('click', function(){
             clearInterval(menTimeer);
             step2();
         });
      $step2.on('click', function(){
             $("#js_share").find('img').hide();
            location.href = location.origin + location.pathname + '?gid=' + gid;
step2();
            $step1.hide();
        });
})();
}
var $bao = $('#js_bao'),
$step2 = $('#js_step2'),
$step3 = $('#js_step3'); (function initConfig(){
execJs();
})(); function execJs() {
function step1(){
      $bao.find("li").click(function(){
$(this).addClass("on").siblings().removeClass("on");
})
   } (function bindEvent () {
step1();
})();
}

陈-朱-兴- js写法【案例】:的更多相关文章

  1. 陈朱兴-js写法【案例】:

    ajax请求: 一.从服务器端请求数据: var url = '';url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid='+ ...

  2. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  3. js计算器案例

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  4. 正則表達式--js使用案例

    前言:在前端页面使用中.遇到日期格式的验证.開始使用了一款表单控件验证.可是不兼容!!并且使用起来还受到非常大约束.所以就决定自己写原生js. 为了完毕日期格式的验证.第一步,当然是学会使用正則表達式 ...

  5. JS小案例:循环间隔重复变色

    在A.B.C三个区块中,有且仅有一个红色,要求红色每隔一秒即进入下一个区块,变色过程不断循环往复. 参考代码: <!DOCTYPE html> <html lang="zh ...

  6. arttemplate.js简洁写法案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. arttemplate.js原生写法案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. node.js(小案例)_实现学生信息增删改

    一.前言 本节内容主要对小案例做一个总结: 1.如何开始搭建小项目 2.路由设计 3.模块应用 4.项目源码以及实现过程github地址: 项目演示如下: 二.主要内容 1.项目的关键性js源码: 项 ...

  9. node.js 爬虫案例

    本案例是爬的一部小说,爬取并存在本地 使用了动态浏览器头部信息,和 动态ip代理, 这2个方式可以有效的伪装自己,不至于被反爬,然后拉黑,之前已有记录,浏览器头部信息,也记录的有, app.js im ...

随机推荐

  1. Android开发工具---SQLiteManager插件

    Android开发工具---SQLiteManager插件 效果图例如以下: 平时在开发过程中查看数据库都要把数据库文件导出来,然后再用其它工具打开,SQLiteManager插件则给予我们一些便利. ...

  2. 从头认识java-15.3 使用HashSet须要注意的地方

    这一章节我们来讨论一下使用Set的各种实现须要注意的地方. Set接口的经常使用实现类有:HashSet.TreeSet,LinkedHashSet 1.HashSet 大家对于HashSet的印象都 ...

  3. Post请求方式长度參数过长导致參数为空

    Post提交方式本身对于參数的长度没有限制,HTTP协议也没有限制. 可是今天在做一个web项目的时候碰到一个问题,当要提交的表单内容达到一定大小时,发现后台代码接收到的參数为空. 查询了一下.发现是 ...

  4. zzuoj--10400--海岛争霸(并查集)

    10400: B.海岛争霸 Time Limit: 2 Sec  Memory Limit: 128 MB Submit: 128  Solved: 46 [Submit][Status][Web B ...

  5. ORACLE RAC如何增加节点

    ORACLE RAC系统是一个可以横向进行扩展的系统,当一个RAC系统计算能力不满足客户的需求时候,增加节点能够快速增加整个系统的计算能力,使得客户系统计算能力得到一定的提升,以满足客户不断增长的计算 ...

  6. yum概述配置

    YUM(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的服务器自动下载 ...

  7. VisualStudio UnitTest FrameWork

    当创建单元测试时,Microsoft.VisualStudio.TestTools.UnitTesting的名字控件会添加到测试项目中,该名字控件中包含很多有用的类: 断言类:在单元测试中验证条件 初 ...

  8. Glide中的回调:targets

    Glide隐藏了一大推复杂的在后台的场景,Glide做了所有的网络请求和处理在后台线程中,准备好了切回到ui线程后更新ImageView. 假设ImageView不再是图像的最后一步.我们只要Bitm ...

  9. 【原创】Apache和Tomcat实现动静分离

    集群中每个节点都启用了页面静态化功能,所以,为了防止单个节点刷新造成找不到页面问题,将每个节点刷新的页面都放入apache虚拟目录下,由apache统一来处理.静态页面由apache处理,动态页面仍然 ...

  10. 玩转图片上传————原生js XMLHttpRequest 结合FormData对象实现的图片上传

    var form=document.getElementById("formId"); var formData=new FormData(form); var oReq = ne ...