一个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;//用户不存在  }  ?>

转载于:https://www.cnblogs.com/xiede/p/8999312.html

一个mui+ajax+php的demo相关推荐

Mui --- app与服务器之间的交互原理、mui ajax使用
1.APP与服务器之间的交互原理app端(客户端)与服务端的交互其实理解起来和容易,客户端想服务器端发送请求,服务器端进行数据运算后返回最终结果.结果可以是多种格式: 1.text 文本格式 2.xm ...
mui ajax方法
mui ajax方法详解: mui提供了mui.ajax,在此基础上有分装出mui.get()/mui.getJSON()/mui.post()三个方法. mui.ajax( url [,settin ...
一个简单的Webservice的demo(中)_前端页面调用
首先新建项目,这里有两种调用方式,为了能方便理解,新建页面WebserviceTest如下图: 先引用写好的服务,这里用上次写好的服务.见上次写的一个简单的Webservice的demo,简单模拟服务 ...
MUI框架 · 异步请求：mui.get()、mui.ajax()、mui.post() 技术罗列
MUI自己的一套异步请求的语法:mui.get().mui.ajax().mui.post() 技术罗列官网地址:ajax 官方转载 · 如下: mui框架基于htm5plus的XMLHttpReq ...
瀑布流ajax思路步骤,原生ajax瀑布流demo分享(必看篇)
最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释:img:ajax.php:demo.php 其中img文件夹中放入图片 1.j ...
mui开发APP教程之mui.ajax请求后出现“加载中”
利用mui.ajax向服务器请求数据会出现请求超时的情况,一般若是10S之后还没有响应,就会定义为超时,那么出错了的时候,这10秒钟不可能给用户白屏,即便是请求成功之后打开一个新页面,那么这个间隔时间 ...
Mui.ajax请求服务器正确返回json数据格式
ajax: mui.ajax('http://server-name/login.php',{data:{username:'username',password:'password'},dataTy ...
mui ajax ab,mui.ajax中文乱码
估计这是个bug: [![复制代码](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0); "复制代码&q ...
swift for循环_Swift | 实战一个简单的素数计算器demo
Swift 实战一个简单的素数计算器demo 本期我们来介绍如何用storyboard来实现一个素数计算器demo,storyboard可以明确地知道界面上的组件与代码的关系,而且比起仅用代码写要方便 ...

一个mui+ajax+php的demo

一个mui+ajax+php的demo相关推荐

最新文章

热门文章