用户登录用表单提交和ajax提交的问题

最新推荐文章于 2022-11-09 09:28:52 发布

bymyself11

最新推荐文章于 2022-11-09 09:28:52 发布

阅读量1.1w

点赞数 1

分类专栏：使用知识及遇到的问题

本文链接：https://blog.csdn.net/bymyself11/article/details/52118227

版权

使用知识及遇到的问题专栏收录该内容

28 篇文章 0 订阅

订阅专栏

第一种情况：代码如下：（这种情况下表单提交提交给后台不成功）

<!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>

bymyself11

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
用户登录用表单提交和ajax提交的问题

第一种情况：代码如下：（这种情况下表单提交提交给后台不成功）public/js/jquery.min.js">var baseurl = ""登陆界面*{ margin:0; padding:0; font-family:"微软雅黑"; font-size:12px;} body{ background: url('public/img/login.jpg') n
复制链接

扫一扫