一个mui+ajax+php的demo

html源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>
	<body>
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>用户名</label>
					<input type="text" id="username" placeholder="用户名">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input type="password" id="password" placeholder="密码">
				</div>
			</form>
			<div style="margin-top:20px;text-align: center;">
				<button class="mui-btn mui-btn-primary" id="loginBtn">登录</button>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			(function($, doc) {
				$.init({
					statusBarBackground: '#f7f7f7'
				});
				$.plusReady(function() {
					document.getElementById("loginBtn").addEventListener("tap", function() {
						var username = document.getElementById("username").value;
						var password = document.getElementById("password").value;

						mui.ajax('http://localhost/ServerJson.php', {
							data: {
								username: username,
								password: password
							},
							dataType: 'json', //服务器返回json格式数据
							type: 'post', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							success: function(data) {
								var result = eval('(' + data + ')'); //js原生方法解析json字符串为json对象
								if(result != 1) {
									// 如果密码错误，提示一下信息  
									mui.alert("用户名或密码错误", "登录错误", "关闭");
									//mui.alert(result);
									return;
								}
								mui.openWindow({
									url: 'main.html',
									id: 'main',
								});
							},
							error: function(xhr, type, errorThrown) {
							}
						});

					});
				});
			}(mui, document));
		</script>
	</body>
</html>

　　php代码

<?php
header('Content-type:text/html; Charset=utf8');  
header( "Access-Control-Allow-Origin:*");  
header('Access-Control-Allow-Methods:POST');    
header('Access-Control-Allow-Headers:x-requested-with,content-type');
$name=$_POST['username'];
$pwd=$_POST['password'];
$con = mysqli_connect('localhost','user','password','dbname');//链接数据库
//mysql_set_charset($link,'utf8'); //设定字符集

if(!$con){  
    die('error:'.mysql_error());  
} 

$sql_select="select username,password from pre_common_member where username= ?"; //从数据库查询信息
$stmt=mysqli_prepare($con,$sql_select);
 mysqli_stmt_bind_param($stmt,'s',$name);
 mysqli_stmt_execute($stmt);
 $result=mysqli_stmt_get_result($stmt);
 $row=mysqli_fetch_assoc($result);
    if($row){  
        if($row['password']==$pwd){   
                echo 1;//普通用户   
        }else{  
            echo 3;//密码错误  
        }  
    }else{  
        echo 4;//用户不存在  
    }  

 ?>

一个mui+ajax+php的demo

猜你喜欢