文档章节

灵活运用jQ中的ajax

zhiqiangw
 zhiqiangw
发布于 2016/11/13 10:58
字数 267
阅读 12
收藏 0

HTML主要代码

<meta name="_token" content="622WTGsiGPgpFa7MGMyzBJ8PiHArGKtm2aIuqGSo"/>

<div id="tan"></div>

<input class=" form-control " type="password" name="password" id="password" >
<input class="form-control " id="username" name="username"  type="text" >
<button class="btn aaaaaaa"  id="login" style='width:110% 'type="submit"></button>

jQ中aja主要代码

<script type="text/javascript">
  $('#login').click(function(){
    var username = $('#username');
    var password = $('#password');
    if(username.val()==''){
       username.focus();
      return tootip('用户名不能为空!');
      
    }

    if(password.val()==''){
       password.focus();
      return tootip('密码不能为空!');
      
    }

    $.ajax({
        type: 'post',
        url: 'URL',
        data: { 'username': username.val(),'password':password.val()},
        dataType: 'json',
        headers: {'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')},
        context: $('body'),
        success: function(data){//err

            if(data.err==1){
               return tootip('用户名和密码都不能为空!');
            }
            if(data.err==2){
             
              username.val('');
              password.val('');
              username.focus();
               return tootip('用户名不存在!');
            }
            if(data.err==3){
               password.val('');
               password.focus();
               return tootip('密码不正确!');
            }

            if(data.err==6){
               password.val('');
               password.focus();
               return tootip(data.wz);
            }            
            if(data.err==4){
               return tootip('登录失败,账号非活动状态,禁止登陆!');
            }
            
            if(data.err==5){
               location.href = data.url;
			   return false;
            }
            

        },error: function(xhr, type){
            return tootip('网络连接出错!');
        }


    })
    return false;

  })

  function tootip(t1){
    var t2 = '<div class="HTooltip shake animated" style="width:280px;padding:10px;text-align:center;background-color:#82574f;color:#fff;position:fixed;top:10px;left:50%;z-index:100001;margin-left:-150px;box-shadow:1px 1px 5px #333;-webkit-box-shadow:1px 1px 5px #333;">'+t1+'</div>';
    $('#tan').html(t2);
     window.setTimeout(hideDiv,3000);
     return false;
  }
  function hideDiv(){
    $('#tan').html(' ');
  }
</script>

 

© 著作权归作者所有

zhiqiangw
粉丝 12
博文 193
码字总数 142771
作品 0
郑州
程序员
私信 提问
如何使用 jq 接收 blob 数据

如何使用 jq 接收 blob 数据 ⭐️ 更多前端技术和知识点,搜索订阅号 订阅 目前 jq 用的人还是挺多的,在一些简单的促销 h5 页面,用 jq 去实现一些简单的功能还是比较方便的。本文展示如何用...

JS菌
04/26
0
0
JQuery真的不难~第六回 JQ中的异步调用方式

前言 今天主要讲一下JQ中的异步编程,它将ajax进行封装,在进行异步请求时显得非常容易,无论是GET,POST方式,还是text,xml,javascript,json等数据通讯都是那么的自然 现在,我们就走入jq的...

mcy247
2017/12/06
0
0
jq的优缺点总结

第一部分 jq的优势: 1.出色的浏览器兼容性 2、出色的DOM操作的封装,使他具备强大的选择器,可以进行快速的DOM元素操作 3、可靠的事件处理机制、jq在处理事件绑定的时候是相当的可靠 4、完善...

oQo先生
2017/04/13
0
0
jq的优缺点总结

第一部分 jq的优势: 1.出色的浏览器兼容性 2、出色的DOM操作的封装,使他具备强大的选择器,可以进行快速的DOM元素操作 3、可靠的事件处理机制、jq在处理事件绑定的时候是相当的可靠 4、完善...

oQo先生
2017/04/12
0
0
JS杂谈系列-js的认识和js相关技术的了解

其实这篇博客应该是在讲js之前写的,现在算是补上的内容吧,我写的都是自己了解的,可不是凭空捏造,当然很多会记不清,错了及时提出啊!我写的时候也是写有用的,不会写一点子扯淡的玩意,像...

透笔度
2015/08/16
187
0

没有更多内容

加载失败,请刷新页面

加载更多

Eureka应用注册与集群数据同步源码解析

在之前的EurekaClient自动装配及启动流程解析一文中我们提到过,在构造DiscoveryClient类时,会把自身注册到服务端,本文就来分析一下这个注册流程 客户端发起注册 boolean register() t...

Java学习录
10分钟前
1
0
Java描述设计模式(15):责任链模式

本文源码:GitHub·点这里 || GitEE·点这里 一、生活场景描述 1、请假审批流程 公司常见的请假审批流程:请假天数 当 day<=3 天,项目经理审批当 3<day<=5 天,部门经理审批当 day>5 天...

知了一笑
21分钟前
3
0
总结:数组与链表

1、内存申请:数组在内存上是连续的空间;链表,内存地址上可以是不连续的。 2、查询速度:数组可以随机访问,链表必须顺序访问,即从首个元素开始遍历,逐个查找,所以数组查询很快。 3、写入...

浮躁的码农
29分钟前
3
0
HashMap源码分析

read

V丶zxw
48分钟前
5
0
Python字符串或JSON字符串转字典dict、列表list

有3种方法 1、使用ast模块 >>> import ast>>> s = '["test",1]'>>> ast.literal_eval(s)['test',1]>>> s = '{"test":1}'>>> ast.literal_eval(s){'test': 1} 2、eval函数,这个......

编程老陆
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部