第一种情况:代码如下:(这种情况下表单提交提交给后台不成功)
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type= "text/javascript" src= "<?php echo base_url();?>public/js/jquery.min.js"></script>
<script type= "text/javascript">var baseurl = "<?php echo base_url();?>"</script>
<title>登陆界面</title>
<style>
*{
margin:0;
padding:0;
font-family:"微软雅黑";
font-size:12px;
}
body{
background: url('<?php echo base_url();?>public/img/login.jpg') no-repeat;
}
h1 {
color: #fff;
font-size: 35px;
font-weight: bold;
margin: 80px auto 50px -25px;
text-align: center;
text-shadow: 0 1px 1px #555;
}
.box{
width:390px;
height:320px;
border:solid 1px #ddd;
border-radius:5px;
background:#FFF;
position:absolute;
left:50%;
top:50%;
margin-left:-195px;
margin-top:-160px;/*注意处理浏览器圆角的兼容 */
-webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .3);
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .3);
}
.box h2{
font-weight:normal;
color:#666;
font-size:16px;
line-height:46px;
height:46px;
overflow:hidden;
text-align:center;
border-bottom:solid 1px #ddd;
background:#f7f7f7;
}
.input_box{
width:350px;
padding-bottom:15px;
margin:0 auto;
overflow:hidden;
}
.input_box input{
float:left;
width:348px;
height:40px;
font-size:14px;
border:solid 1px #ddd;
border-radius:5px;
text-indent:10px;
outline:none;
line-height:40px;
}
.input_box button{
width:350px;
height:48px;
background:#3f89ec;
border:none;
border-radius:5px;
outline:none;
cursor:pointer;
font-size:16px;
color:#FFF;
}
#error_box{
height:40px;
width:350px;
margin:0 auto;
line-height:40px;
color:#fc4343;
}
</style>
<script>
$(function() {
$("#login").click(function() {
// 处理表单验证和交给后台处理的逻辑
var oError = document.getElementById("error_box");
var userName = $("#uname").val();
var password = $("#upass").val();
var isNotError = true;
if(userName==""){
oError.innerHTML = "用户名为空 ";
isNotError = false;
return;
}
if(password==""){
oError.innerHTML = "密码为空 ";
isNotError = false;
return;
}
$.ajax({
type: "POST",
url: baseurl+"index.php/Index/do_login",
dataType: "json",
data: {"username":userName,"password":password},
success: function(json){
alert("dddddddddd");
//登录成功
if(json.code==10000){
alert("ok");
}else{
oError.innerHTML = "登录失败 ";
isNotError = false;
return;
}
}
// });
});
});
});
//判断是否敲击了Enter键
$(document).keyup(function(event){
if(event.keyCode ==13){
$("#login").trigger("click");
}
});
</script>
</head>
<body>
<h1>健客大数据平台</h1>
<span style="color:#FF6666;"><form method="post"></span>
<div class="box">
<h2>用户登录</h2>
<div id="error_box"></div>
<div class="input_box">
<input type="text" placeholder="请输入账户名" id="username" name="username"/>
</div>
<div class="input_box">
<input type="password" placeholder="请输入密码" id="password" name="password"/>
</div>
<div class="input_box">
<span style="color:#FF6666;"><button id="login">登录</button></span>
</div>
</div>
<span style="color:#FF6666;"></form></span>
</body>
</html>
上面第一种情况代码提交不成功原因:form表单和ajax的提交方式不同:form表单提交需要刷新界面,ajax提交不需要刷新页面。上面把
<font color="#FF6666"><button id="login">登录</button>这种情况默认type="submit"<font color="#333333">则为表单提交方式这种情况每次点击按钮都提交页面则<span style="color:#FF6666;">数据传不到后台</span>。
<span style="background-color: rgb(255, 255, 255);">我们需要把<span style="color:#FF0000;">type改成</span></span><span style="color:#FF6666;"><span style="color:#333333;"><span style="background-color: rgb(255, 255, 255);"><span style="color:#FF0000;">type="button"</span>这样的话处理就不是表单的提交点击按钮就<span style="color:#FF6666;">不会重新刷新一下界面数据可以成功传给后台。</span>
修改代码如下:</span></span>
</span></font></font>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type= "text/javascript" src= "<?php echo base_url();?>public/js/jquery.min.js"></script>
<script type= "text/javascript">var baseurl = "<?php echo base_url();?>"</script>
<title>登陆界面</title>
<style>
*{
margin:0;
padding:0;
font-family: Arial,helvetica,"Microsoft Yahei",sans-serif;;
font-size:16px;
}
body{
overflow: hidden;//隐藏滚动条
}
h1 {
color: #fff;
font-size: 35px;
font-weight: bold;
margin: 80px auto 50px -25px;
text-align: center;
text-shadow: 0 1px 1px #555;
}
.box{
width:390px;
height:320px;
border:solid 1px #ddd;
border-radius:5px;
background:#FFF;
position:absolute;
left:50%;
top:50%;
margin-left:-195px;
margin-top:-160px;/*注意处理浏览器圆角的兼容 */
-webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .3);
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .3);
}
.box h2{
font-weight:normal;
color:#666;
font-size:16px;
line-height:46px;
height:46px;
overflow:hidden;
text-align:center;
border-bottom:solid 1px #ddd;
background:#f7f7f7;
}
.input_box{
width:350px;
padding-bottom:15px;
margin:0 auto;
overflow:hidden;
}
.input_box input{
float:left;
width:348px;
height:40px;
font-size:14px;
border:solid 1px #ddd;
border-radius:5px;
text-indent:10px;
outline:none;
line-height:40px;
}
.input_box button{
width:350px;
height:48px;
background:#008386;
border:none;
border-radius:5px;
outline:none;
cursor:pointer;
font-size:16px;
color:#FFF;
}
#error_box{
height:40px;
width:350px;
margin:0 auto;
line-height:40px;
color:#fc4343;
}
</style>
<script>
$(function() {
$("#login").click(function() {
// 处理表单验证和交给后台处理的逻辑
var oError = document.getElementById("error_box");
var userName = $("#username").val();
var password = $("#password").val();
var isNotError = true;
if(userName==""){
oError.innerHTML = "用户名为空 ";
isNotError = false;
$("#username").focus();
return;
}
if(password==""){
oError.innerHTML = "密码为空 ";
isNotError = false;
$("#password").focus();
return;
}
$.ajax({
type: "POST",
url: baseurl+"index.php/Index/do_login",
dataType: "json",
data: {"username":userName,"password":password},
//data:dataString,
success: function(json){
//登录成功
if(json.code==10000){
alert("ok");
}
}
});
});
});
//判断是否敲击了Enter键
$(document).keyup(function(event){
if(event.keyCode ==13){
$("#login").trigger("click");
}
});
</script>
</head>
<body>
<h1>健客大数据平台</h1>
<form>
<div class="box">
<h2>用户登录</h2>
<div id="error_box"></div>
<div class="input_box">
<input type="text" placeholder="请输入账户名" id="username" name="username"/>
</div>
<div class="input_box">
<input type="password" placeholder="请输入密码" id="password" name="password"/>
</div>
<div class="input_box">
<!-- type="button"这里的要这样写不让页面会默认为type="submit",ajax 提交时页面是不用刷新页面的 而表单提交需要刷新,这里我们是不用刷新色-->
<span style="color:#FF6666;"> <button id="login" type="button">登录</button></span>
</div>
</div>
</form>
</body>
<script type= "text/javascript" src= "<?php echo base_url();?>public/js/promptBox.js"></script>
</html>