A demo of mui+ajax+php

html source code

<!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>Username</label>
					<input type="text" id="username" placeholder="用户名">
				</div>
				<div class="mui-input-row">
					<label>Password</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', //The server returns data in json format
							type: 'post', //HTTP request type
							timeout: 10000, //The timeout is set to 10 seconds;
							success: function(data) {
								var result = eval('(' + data + ')'); //js native method parses json string into json object
								if(result != 1) {
									// If the password is wrong, prompt a message  
									mui.alert("Username or password error", "Login error", "Close");
									//mui.alert(result);
									return;
								}
								mui.openWindow({
									url: 'main.html',
									id: 'main',
								});
							},
							error: function(xhr, type, errorThrown) {
							}
						});

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

　　php code

<?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');//Link database
//mysql_set_charset($link,'utf8'); //Set character set

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

$sql_select="select username,password from pre_common_member where username= ?"; //Query information from database
$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;//Ordinary user   
        }else{  
            echo 3;//Wrong password  
        }  
    }else{  
        echo 4;//User does not exist  
    }  

 ?>

A demo of mui+ajax+php

Guess you like