js----load加载登录注册页面

在进行项目开发的时候，登录注册页面往往是在全站通用的，直接放到页面上引入，会使得HTML的DOM结构变得笔记多，封装成JS字符串又不利于修改调整，可以考虑使用异步加载HTML，简单示例：

login.html

<div class="login">
    <h3>登录</h3>
    <div><input type="text" class="name" value="张三" placeholder="您的姓名"></div>
    <div><input type="text" class="phone" value="18314416390" placeholder="您的电话"></div>
    <div><button class="sub">提交</button></div>
</div>

点击异步加载login.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<style type="text/css">
*{margin: 0; margin: 0;}
.login{width: 400px; margin: 0px auto;}
.login h3{margin-bottom: 20px;}
.login input{height: 30px; line-height: 30px; margin-bottom: 20px;}
.login button{width: 100px; height: 30px; line-height: 30px; text-align: center;}
</style>
</head>
<body>
<div class="top"><button id="btn">登录</button></div>
<div id="login" class="login"></div>
</body>
<script type="text/javascript">
$("#btn").click(function(){
    $("#login").load("login.html");
});
$('.sub').live('click',function(){
    console.log($('.name').val());
    console.log($('.phone').val());
});
</script>
</html>

 

posted @ 2020-07-01 18:07  帅到要去报警  阅读(444)  评论(0)  编辑  收藏  举报