jquery登录页面代码下载（jquery网页）

今天给各位分享jquery登录页面代码下载的知识，其中也会对jquery网页进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、javascript html 设计一个登录界面
• 2、简单的jquery代码
• 3、用html代码编写一个简单的登陆界面
• 4、jQuery未登录 页面如何跳转到登录前的页面
• 5、写一个登录页面，用jQuery的ajax提交登录信息
• 6、仿百度登陆弹窗的JS或者jquery代码 求详细

javascript html 设计一个登录界面

注册页面代码：

!DOCTYPE html

html lang="en"

head

    meta charset="UTF-8"

    title注册/title

/head

body

form method="post" onsubmit="return false" id="form"

    input type="text" name="username" placeholder="用户名"br

    input type="password" name="password" placeholder="密码"br

    input type="password" name="rePassword" placeholder="再次输入密码"br

    input type="submit" onclick="register_user()" value="注册"br

/form

a href="login.html"去登录/a

script

    var localDB = openDatabase('localDB', '1.0', 'Test DB', 2 * 1024 * 1024);

    localDB.transaction(function (ts) {

        ts.executeSql('CREATE TABLE IF NOT EXISTS user(username,password)')

    });

    function register_user() {

        var username = document.getElementsByTagName("input")[0].value;

        var password = document.getElementsByTagName("input")[1].value;

        var rePassword = document.getElementsByTagName("input")[2].value;

        if(password != rePassword)

        {

            alert("两次输入的密码不同，请重新输入");

        }else

 {

            localDB.transaction(function(ts){

                ts.executeSql("INSERT INTO user (username,password) VALUES ('"+username+"','"+password+"');");

                alert("注册成功");

            });

        }

    }

/script

/body

/html

登录页面代码：

!DOCTYPE html

html lang="en"

head

    meta charset="UTF-8"

    title登录/title

/head

body

form onsubmit="return false" method="post"

    input type="text" placeholder="用户名"br

    input type="password" placeholder="密码"br

    input type="submit" value="登录" onclick="login()"br

/form

a href="register.html"去注册/a

script

    var localDB = openDatabase('localDB', '1.0', 'Test DB', 2 * 1024 * 1024);

    localDB.transaction(function (ts) {

        ts.executeSql("SELECT * FROM user",[],function (tx, results) {

            var len = results.rows.length;

            if(len=0)

            {

                localDB.transaction(function (ts) {

                    ts.executeSql('CREATE TABLE IF NOT EXISTS user(username,password)')

                });

            }

        });

    });

    function login() {

        var username = document.getElementsByTagName("input")[0].value;

        var password = document.getElementsByTagName("input")[1].value;

        localDB.transaction(function (ts) {

            ts.executeSql("SELECT * FROM user WHERE username='"+username+"';",[],function (ts, res) {

                if(res.rows.length=0)

                {

                    alert("登录失败，用户未注册");

                }else if (password == res.rows[0].password)

                {

                    alert("登录成功,三秒后跳转到百度");

                    setInterval(function () {

                        location.href = "";

                    },3000);

                }else

 {

                    alert("登录失败，密码错误");

                }

            });

        })

    }

/script

/body

/html

以上代码使用了WEB SQL，还请选择合适的浏览器查看。

简单的jquery代码

这是封装好的json需要向后台传的值

json的格式为{key1:value1,key2:value2,key3:value3.........}中间用“，”隔开

后台获取key来都到value值

例：{suggest:txt}

这个json只有一个参数，参数名为suggest，值为txt也就是$("input").val()的值

这是jquery的ajax异步操作

我这样讲应该够清楚吧，望采纳……

用html代码编写一个简单的登陆界面

!DOCTYPE htmlhtml lang="zh-CN"head

meta charset="utf-8"

meta http-equiv="X-UA-Compatible" content="IE=edge"

meta name="viewport" content="width=device-width, initial-scale=1"

title登录/title

link href="css/bootstrap.min.css" rel="stylesheet"/headbodynav class="navbar navbar-default"

div class="container-fluid"

div class="navbar-header"

a class="navbar-brand" href="./"jsp作业/a

/div

div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"

ul class="nav navbar-nav navbar-right"

lia href="login.html"登录/a/li

/ul

/div

/div/navdiv class="container"

div class="row"

div class="col-md-4"

/div

div class="col-md-4"

form class="form-signin" target="submitFrame" method="post"

h2 class="form-signin-heading"登录到jsp作业/h2

label for="inputEmail"Email/label

input type="email" id="inputEmail" class="form-control" placeholder="请输入Email" required autofocusbr

label for="inputPassword"密码/label

input type="password" id="inputPassword" class="form-control" placeholder="请输入密码" required

div class="checkbox"

label

input type="checkbox" value="remember-me" checked="checked" 记住密码 /label

/div

button type="submit" class="btn btn-primary" id="btn-login"登录/button

a href="reg.html" class="btn btn-default"注册/a

/form

iframe style="display: none;" name="submitFrame" src="about:blank"/iframe

/div

div class="col-md-4"

/div

/div

script src="js/jquery.min.js"/script/body/html

jQuery未登录 页面如何跳转到登录前的页面

请把部分代码粘贴出来，方便解答，一般的方法是：如果页面未登录，后端返回未登录json，前端判断json，然后用window.location.href，跳转到登录前页面。

写一个登录页面，用jQuery的ajax提交登录信息

// 登陆

function loginAjax(param) {

    var self = this;

    $.ajax({

        type: 'post',

        url: '/user/login',

        dataType: 'json',

        data: param,

        success: function(data) {

        },

        error: function(error) {

        console.log(error);

        }

    })

}

1.以上是一个登录的Ajax方法，参数说明

url:  请求的链接地址

data: 请求的参数 以json格式传递 例如：{username: 'name', password: '123456'}

type: 请求方法  常用的是 get 或者post ， 默认为get请求。

dataType: 预期服务器返回的数据类型

2.以下是jQuery官方文档中的一段ajax请求代码：

$.ajax({

   type: "POST",

   url: "some.php",

   data: "name=Johnlocation=Boston",

   success: function(msg){

     alert( "Data Saved: " + msg );

   }

});

仿百度登陆弹窗的JS或者jquery代码 求详细

!DOCTYPE html

html

head

    meta charset="utf-8" /

    titlediv布局/title

    script type="text/javascript" src=""/script

    style type="text/css"

        .corInsertHref

        {

            position: absolute;

            z-index: 10000;

            width: 370px;

            float: left;

            display: none;

            background-color: #fff;

            padding: 10px;

        }

        .corBackground

        {

            width: 100%;

            height: 100%;

            position: absolute;

            background-color: #000;

            top: 0;

            left: 0;

            filter: alpha(opacity=30);

            -moz-opacity: 0.30;

            -khtml-opacity: 0.30;

            opacity: 0.30;

            z-index: 9999;

            display: none;

        }

    /style

    script type="text/javascript"

        $(function() {

            //点击登录按钮 弹出层并初始化弹出层位置

            $("#btnlogin").click(function() {

                $("#corBackground").animate({ opacity: "show" }, "slow");

                $("#corInsertHref").animate({ opacity: "show" }, "slow");

                autoSize($("#corInsertHref"));

            });

            //窗口大小缩放事件

            $(window).resize(function() {

                autoSize($("#corInsertHref"));

            });

            //窗口大小缩放时调整弹出层的位置

            var autoSize = function(corObj) {

                var wWidth = $(window).width(), wHeight = $(window).height();

                var ihWidth = corObj.outerWidth(true), ihHeight = corObj.outerHeight(true);

                corObj.css({ "top": ((wHeight - ihHeight) / 2) + "px", "left": ((wWidth - ihWidth) / 2) + "px" });

            }

        });

    /script

/head

body

    span id="btnlogin"登录/span

    div id="corInsertHref" class="corInsertHref"

        p

            账号input id="txtName" type="text" //p

        p

            密码input id="txtPwd" type="text" //p

        p

            input type="button" value="登 录" //p

    /div

    div id="corBackground" class="corBackground"

    /div

/body

/html

粗略的写了下，可以吗？

jquery登录页面代码下载的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于jquery网页、jquery登录页面代码下载的信息别忘了在本站进行查找喔。