onsubmit事件输出DOM元素无效

lanlvy 2017-04-11 09:33:00

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#content{
margin: auto;
}
</style>
</head>
<body>
<div id="content">
<form name="userForm">
<label for="username"name+pwd>
<input id="uname" type="text" name="username" placeholder="用户名"/>
<span id="tips"></span>
</label>
<br />
<label for="password">
<input id="pwd" type="password" name="password" placeholder="请输入6~16位的密码"/>
</label>
<br />
<input id="submit" type="button" value="登陆"></input>
</form>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$('#submit').click(function(){
var name = $('#uname').val();
var pwd = $('#pwd').val();
$.post('login.php',{username:name,password:pwd},function(res){
if(res=='成功'){
console.log(res+'success');
$('#tips').text('登陆成功!');
}else{
$('#tips').text('用户名和密码不匹配!');
}
})
}
)
</script>
</body>
</html>




<?php
if(isset($_POST) && !empty($_POST)){
$username = $_POST['username'];
$password = $_POST['password'];
//将用户名密码代入查询语句查询是否存在
include 'mysql_connect.php';
mysqli_select_db($conn, 'db_test');
$sql = "select * from user where (name ='$username') and (password ='$password')";
$check_query = mysqli_query($conn,$sql);
$result = mysqli_fetch_array($check_query);
if($result){
$response = "成功";
}else{
$response = "失败";
}
echo $response ;
}

求各位帮忙看一下是什么情况,将input=submit改成input=button才能正常。input=submi的时候有时提交有反应有时提交没反应,请问是什么原因或者告知我怎么调试跟踪,我自己debugger跟踪的时候跟踪到jQuery库里面去了,太多了,一步一步下去得很久。有么有什么比较快捷的调试跟踪方法
...全文
161 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhangsheng_1992 2017-04-11
  • 打赏
  • 举报
回复
1.你是用的form标签 如果不指定action属性 那么submit默认提交的事当前页面 仔细观察submit后的你的url 会出现类似 xxx.xxxx.com?username=&password= 2.并不是不输出dom元素 只是因为页面跳转了 所以动态输出的dom元素被重置了 如果你一定要使用submit 可以给form表单加上 onsubmit事件 记得要return 比如 onsubmit="return check()" 然后在check函数中

function check(){
$('#submit').click(function(){
                var name = $('#uname').val();
                var pwd = $('#pwd').val();
                $.post('login.php',{username:name,password:pwd},function(res){
                    if(res=='成功'){
                        console.log(res+'success');
                        $('#tips').text('登陆成功!');       
                        return false;
                    }else{
                        $('#tips').text('用户名和密码不匹配!');
                        return false;
                    }
                })
            }
            )
}
天际的海浪 2017-04-11
  • 打赏
  • 举报
回复
你既然用了ajax提交就不需要用表单再提交了

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧