这里是HTML部分代码:
<div role="main" class="ui-content"> <form method="post" action="php/login.php" id="form" name="form"> <ul> <input id="user" type="text" name="user" value="" placeholder="请输入用户名" /> <br> <input id="password" name="password" type="password" value="" placeholder="请输入密码"/> <br> <a id="btn1" type="submit" href="#index3" data-role="button" data-icon="user" style="width:30%;float:left">登录</a> <a href="#index2" data-role="button" data-icon="plus" style="width:30%;float:right">注册</a> <li id="confirm"></li> </ul> </div>下面是Jquery Ajax代码:
$(document).ready(function(){ $("#form").submit(function(){ login(); return false; }); }); function login(){ var user = $("#user").val(); var password = $("#password").val(); if (user == ""){ $("#confirm").text("请输入登录用户名"); $("user").focus(); return false; } if(password == ""){ $("#confirm").text("请输入登录密码"); $("#password").focus(); return false;aaaaa } $.ajax({ type: "POST", url: "php/login.php", dataType: "json", data: {"user" : "user", "password": "password"}, beforeSend: function(){ $("confirm").text("登录中,请稍候"); }, success: function(msg){ if(msg == "successful"){ $("#confirm").text("登录成功,欢迎" + user + "回来!正在进入你的空间"); }else { $("#confirm").text("没有此用户或者密码不正确!"); } } }); };最后是PHP的代码:
<?php include_once('db.php'); if(isset($_SESSION['user'])){ echo json_encode(array('result'=>'successful')); return; } $user=$_GET['user']; $password=$_GET['password']; if($user==""){ echo json_encode(array('result'=>'failed','message'=>'Username or password wrong')); return; } if($password==""){ echo json_encode(array('result'=>'failed','message'=>'Username or password wrong')); return; } $link = new mysqli('localhost', $dbuser, $dbpass, $dbname); if ($link->connect_error) { die("Connection failed: " . $link->connect_error); } $sql = "SELECT * FROM `user` WHERE name= '".$user."' and password= '".$password."'"; $result = $link->query($sql); if ($result->num_rows > 0) { $details = $result->fetch_assoc(); $_SESSION['user'] = $details['name']; echo json_encode(array('result'=>'successful')); return; }else { echo json_encode(array('result'=>'failed','message'=>'Username or password wrong')); } ?>
控制台没有报错,但是点击登陆按钮就是没有任何反应。登陆验证完全无效。
用chrome和developer console看一下ajax请求的request、response,FF的firebug也可以。 ###### 看到了几个问题:
0. 在submit中我都是event.preventDefault(),不知道return fasle是不是一样。 1. 多个类似的问题(下面还有一个confirm,那个测试用的“aaaaa”也可以删了)
var user = $("#user").val(); var password = $("#password").val(); if (user == ""){ $("#confirm").text("请输入登录用户名"); $("user").focus(); // -> $('#user').focus();2. 你在ajax中用POST方式,但是在服务器用的是GET方式
3. dataType:"json" 应该不是json(可以不要这行),你服务器 读取的方式是form的形式 4. 在js和PHP中可以直接if(str)来判断str是不是为空 ######回复 @南漂一卒 : 非常感谢你的讲解! =)######jQuery 事件回调中可以用 return false; 一次性 禁用默认功能、阻止冒泡传播,但不推荐这种做法了~######用多了框架,看原生php突然各种不适应######PS: 小心SQL注入###### php或者mysql都是utf8了吗?php有没有bom值(如果有,要去除)。
要注意jQuery操作json是需要utf8的。 ######把msg =="successful" 改成 msg.result =="successful"
######a似乎没有type属性,没有激活表单的submit事件,试着加入input type="submit" 或者 通过事件绑定执行提交。######
######用post提交,用GET怎么可能会接收到?
点击登录 并没有出发提交事件,所以不会报错,因为在页面看来 这就是正常点击 我建议直接a标签点击时 触发JQ事件
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。