原文:http://wiki.appcelerator.org/display/guides/HTTPClient+with+PHP+and+MySQL
本课用 Titanium.Network.HTTPClient对象结合php+MySQL 后台做注册登录模块。//set the default background color Titanium.UI.setBackgroundColor('#FFF'); //create tab group var tabGroup = Titanium.UI.createTabGroup(); //create our registration window var registerWindow = Titanium.UI.createWindow({ title: 'Register', backgroundColor: '#FFF', url: "RegisterWindow.js" }); //create our login window var loginWindow = Titanium.UI.createWindow({ title: 'Login', backgroundColor: '#FFF', url: "LoginWindow.js" }); //create the tab to hold the registration window var registerTab = Titanium.UI.createTab({ icon: 'register.png', title: 'Register', window: registerWindow }); //create the tab to hold the login window var loginTab = Titanium.UI.createTab({ icon: 'login.png', title: 'Login', window: loginWindow }); //add our tabs to the tabgroup tabGroup.addTab(registerTab); tabGroup.addTab(loginTab); //display the tabgroup tabGroup.open();
var curWindow = Titanium.UI.currentWindow; var scrollView = Titanium.UI.createScrollView({ contentWidth:'auto', contentHeight:'auto', top:0, showVerticalScrollIndicator:true, showHorizontalScrollIndicator:true }); var view = Titanium.UI.createView({ width:"100%", height: 400, top:10, paddingBottom: 15 }); var lbl_Email = Titanium.UI.createLabel({ text:'Email:', height:30, width:"98%", color:'#222', font:{fontSize:16}, top: 10 }); var txt_Email = Titanium.UI.createTextField({ width: "98%", color: "#222", paddingLeft: 5, border: 1, borderColor: "gray", borderRadius: 3, font:{fontSize:16}, height: 40, top: 40 }); var lbl_User = Titanium.UI.createLabel({ text:'Username:', height:30, width:"98%", color:'#222', font:{fontSize:16}, top: 90 }); var txt_User = Titanium.UI.createTextField({ width: "98%", color: "#222", paddingLeft: 5, border: 1, borderColor: "gray", borderRadius: 3, font:{fontSize:16}, height: 40, top: 120 }); var lbl_Pass1 = Titanium.UI.createLabel({ text:'Password:', height:30, width:"98%", color:'#222', font:{fontSize:16}, top: 170 }); var txt_Pass1 = Titanium.UI.createTextField({ width: "98%", color: "#222", paddingLeft: 5, border: 1, borderColor: "gray", borderRadius: 3, font:{fontSize:16}, height: 40, top: 200, passwordMask: true }); var lbl_Pass2 = Titanium.UI.createLabel({ text:'Repeat Password:', height:30, width:"98%", color:'#222', font:{fontSize:16}, top: 250 }); var txt_Pass2 = Titanium.UI.createTextField({ width: "98%", color: "#222", paddingLeft: 5, border: 1, borderColor: "gray", borderRadius: 3, font:{fontSize:16}, height: 40, top: 280, passwordMask: true }); var btn_Register = Titanium.UI.createButton({ width: "98%", color: "#555", font:{fontSize: 22, fontWeight: "bold"}, height: 50, top: 340, title: "Register" }); view.add(lbl_Email); view.add(txt_Email); view.add(lbl_User); view.add(txt_User); view.add(lbl_Pass1); view.add(txt_Pass1); view.add(lbl_Pass2); view.add(txt_Pass2); view.add(btn_Register); scrollView.add(view); curWindow.add(scrollView);结果如下:
function getUserInfo(){ var email = txt_Email.value; var user = txt_User.value; var pass1 = txt_Pass1.value; var pass2 = txt_Pass2.value; if(pass1 == pass2){ registerUser(email, user, pass1); } else { alert("Your passwords do not match."); } }验证2个密码是否相同,如果是,调用registerUser函数,传进3个值。
btn_Register.addEventListener('click',getUserInfo);你也可以把这一块写成全局函数,这样登录表单也能调用。但本课还是写成私有函数。
function registerUser(email, user, pass){ var request = Titanium.Network.createHTTPClient(); var url = "http://localhost/mobile.php?action=add_user&email="+email+"&user="+user+"&pass="+pass; request.open("GET",url); request.onload = function(){ var arrData = []; arrData = eval('('+this.responseText+')'); var result = arrData[0].result; if(result == "true"){ var alrt_Success = Titanium.UI.createAlertDialog({ title: 'Success!', message: 'You have successfuly created a new account. Now you can log in.', buttonNames: ['OK'] }); alrt_Success.show(); } else if (result == "another_user"){ var alrt_Sorry = Titanium.UI.createAlertDialog({ title: 'Sorry!', message: 'According to our database, that username is already in use.', buttonNames: ['OK'] }); alrt_Sorry.show(); } else { var alrt_Fail = Titanium.UI.createAlertDialog({ title: 'Error!', message: 'It seems we are experiencing problems... please try again later.', buttonNames: ['OK'] }); alrt_Fail.show(); } }; request.send(); }一行一行看:
var request = Titanium.Network.createHTTPClient();创建Titanium.Network.HTTPClient对象。
var url = "http://localhost/mobile.php?action=add_user&email="+email+"&user="+user+"&pass="+pass;这就是后台地址,本例是localhost。当然可以是IP地址或网址。
request.open("GET",url);这一行指定发送类型GET,和url。
request.onload = function()\{...\}这一行是回调函数。其中:
var arrData = []; arrData = eval('('+this.responseText+')'); var result = arrData[0].result;第1行创建变量数组来存储返回数据。
if(result == "true"){ var alrt_Success = Titanium.UI.createAlertDialog({ title: 'Success!', message: 'You have successfuly created a new account. Now you can log in.', buttonNames: ['OK'] }); alrt_Success.show(); }当返回true时,创建Titanium.UI.AlertDialog对象。
else if(result == "another_user"){ var alrt_Sorry = Titanium.UI.createAlertDialog({ title: 'Sorry!', message: 'According to our database, that username is already in use.', buttonNames: ['OK'] }); alrt_Sorry.show(); } else{ var alrt_Fail = Titanium.UI.createAlertDialog({ title: 'Error!', message: 'It seems we are experiencing problems... please try again later.', buttonNames: ['OK'] }); alrt_Fail.show(); }registerUser 函数最后一行:
request.send();现在点按钮,还不能看,因为没写后台。
<?php echo "Test123"; ?>这样就能通过页面 http://localhost/mobile.php访问了:
Test123
<?php switch($_GET['action']) { case 'add_user': break; case 'login': break; } ?>下面是接收变量:
$email = $_GET['email']; $user = $_GET['user']; $pass = md5(trim($_GET['pass']));把下面代码放在变量声明后:
$resultArr = Array(); $connection = mysql_connect("localhost","root",""); $db = mysql_select_db("mobile",$connection); $q_string = "SELECT * FROM mobile_users WHERE user = '$user'"; $query = mysql_query($q_string,$connection);第1行创建 PHP 数组,用来存储JSON值。
if(mysql_num_rows($query) > 0){ $resultArr[0]['result'] = "another_user"; } else { $query = mysql_query("INSERT INTO mobile_users (user, email, pass) VALUES ('$user', '$email', '$pass')",$connection); if($query){ $resultArr[0]['result'] = "true"; } else { $resultArr[0]['result'] = "false"; } } echo json_encode($resultArr); mysql_close($connection);
var curWindow = Titanium.UI.currentWindow; var scrollView = Titanium.UI.createScrollView({ contentWidth:'auto', contentHeight:'auto', top:0, showVerticalScrollIndicator:true, showHorizontalScrollIndicator:true }); var view = Titanium.UI.createView({ width:"100%", height: "auto", top:10, paddingBottom: 15 }); var lbl_User = Titanium.UI.createLabel({ text:'Username:', height:30, width:"98%", color:'#222', font: {fontSize:16}, top: 10 }); var txt_User = Titanium.UI.createTextField({ width: "98%", color: "#222", paddingLeft: 5, border: 1, borderColor: "gray", borderRadius: 3, font:{fontSize:16}, height: 40, top: 40 }); var lbl_Pass = Titanium.UI.createLabel({ text:'Password:', height:30, width:"98%", color:'#222', font:{fontSize:16}, top: 90 }); var txt_Pass = Titanium.UI.createTextField({ width: "98%", color: "#222", paddingLeft: 5, border: 1, borderColor: "gray", borderRadius: 3, passwordMask: true, font:{fontSize:16}, height: 40, top: 120 }); var btn_Login = Titanium.UI.createButton({ width: "98%", color: "#555", font:{fontSize: 22, fontWeight: "bold"}, height: 50, top: 180, title: "Log In" }); view.add(lbl_User); view.add(txt_User); view.add(lbl_Pass); view.add(txt_Pass); view.add(btn_Login); scrollView.add(view); curWindow.add(scrollView);
function getUserInfo(e){ var user = txt_User.value; var pass = txt_User.value; loginUser(user,pass); } btn_Login.addEventListener('click',getUserInfo);整个代码
function loginUser(user,pass){ var request = Titanium.Network.createHTTPClient(); var url = "http://localhost/mobile.php?action=login&user="+user+"&pass="+pass; request.open("GET",url); request.onload = function(){ var arrData = []; arrData = eval('('+this.responseText+')'); var result = arrData[0]; if(result === "true"){ Titanium.App.Properties.setString("user_id",arrData[0].user_id); var alrt_Success = Titanium.UI.createAlertDialog({ title: 'Success!', message: 'You are now logged in and can access member-only features.', buttonNames: ['OK'] }); alrt_Success.show(); } else { var alrt_Sorry = Titanium.UI.createAlertDialog({ title: 'Unsuccessful...', message: 'You have provided the incorrect username and/or password.', buttonNames: ['OK'] }); alrt_Sorry.show(); }}; loader.send(); }逐行讲解:
var request = Titanium.Network.createHTTPClient();创建 Titanium.Network.HTTPClient对象。
var url = "http://localhost/mobile.php?action=login&user="+user+"&pass="+pass;创建GET字串。
request.open("GET",url);执行
request.onload = function(){...}回调事件。
$resultArr = Array(); $user = $_GET['user']; $pass = md5(trim($_GET['pass'])); $connection = mysql_connect("localhost","root",""); $db = mysql_select_db("mobile",$connection); $query = mysql_query("SELECT * FROM <tt>mobile_users</tt> WHERE <tt>user</tt> = '$user' AND <tt>pass</tt> = '$pass'"); if(mysql_num_rows($query) > 0){ $row = mysql_fetch_assoc($query); $resultArr[0]['result'] = "true"; $resultArr[0]['user_id'] = $row['id']; } else { $resultArr[0]['result'] = "false"; } echo json_encode($resultArr); mysql_close($connection);
完整代码:
<?php switch($_GET['action']) { case 'add_user': $user = $_GET['user']; $pass = md5(trim($_GET['pass'])); $email = $_GET['email']; $resultArr = Array(); $connection = mysql_connect("localhost","root",""); $db = mysql_select_db("mobile",$connection); $query = mysql_query("SELECT * FROM <tt>mobile_users</tt> WHERE <tt>user</tt> = '$user'",$connection); if(mysql_num_rows($query) > 0){ $resultArr[0]['result'] = "another_user"; } else { $query = mysql_query("INSERT INTO mobile_users (user, email, pass) VALUES ('$user', '$email', '$pass')",$connection); if($query){ $resultArr[0]['result'] = "true"; } else { $resultArr[0]['result'] = "false"; } } echo json_encode($resultArr); mysql_close($connection); break; case 'login': $resultArr = Array(); $user = $_GET['user']; $pass = md5(trim($_GET['pass'])); $connection = mysql_connect("localhost","root",""); $db = mysql_select_db("mobile",$connection); $query = mysql_query("SELECT * FROM <tt>mobile_users</tt> WHERE <tt>user</tt> = '$user' AND <tt>pass</tt> = '$pass'"); if(mysql_num_rows($query) > 0){ $row = mysql_fetch_assoc($query); $resultArr[0]['result'] = "true"; $resultArr[0]['user_id'] = $row['id']; } else { $resultArr[0]['result'] = "false"; } echo json_encode($resultArr); mysql_close($connection); break; } ?>
var user_id = Titanium.App.Properties.getString("user_id");