mui.post學習心得、php做後端和跨域的解決辦法

從前天開始就在學習mui.ajax和mui.post的方法,因爲post比較簡單,先學了post的ajax,,,一開始遇到很多困難,終於花了兩天的時間解決了,要重點謝謝成都猿團教育的諾墨老師,諾墨老師雖然在泰國度假,但是還是很 熱心的幫我解決問題,,,謝謝諾墨老師。


正題,先來看看什麼是mui.post吧,

mui團隊對mui.post的解釋

mui.post()方法是對mui.ajax()的一個簡化方法,直接使用POST請求方式向服務器發送數據、且不處理timeout和異常(若需處理異常及超時,請使用mui.ajax()方法),使用方法: mui.post(url[,data][,success][,dataType]),如上登錄鑑權代碼換成mui.post()後,代碼更爲簡潔,如下:

mui.post('http://server-name/login.php',{
		username:'username',
		password:'password'
	},function(data){
		//服務器返回響應,根據響應結果,分析是否登錄成功;
		...
	},'json'
});

的卻,上面給的很明白,但是我們只知道前端的Javascript這麼寫了,但是後端應該怎麼寫卻沒有寫出來,還有值得注意的是我們做的是移動app的開發,我們在真機調試的時候請求的URL地址應該怎麼寫他也沒有說出,於是我自己摸索了兩天,,,終於弄懂了一點。我先貼出我的代碼吧

前端代碼:

<span style="font-size:18px;"><!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>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
    <style type="text/css">
    	.mui-btn{
    		margin-top: 10px;
    		margin-left: 3px;
    		width: 98%;
    		height: 40px;
    	}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	   
	    <h1 class="mui-title">ajax登錄測試</h1>
	</header>
	<div class="mui-content">
	   <form class="mui-input-group">
	       <div class="mui-input-row">
	           <label>用戶名:</label>
	           <input type="text" class="mui-input-clear" id="name" placeholder="請輸入用戶名">  //獲取用戶名
	       </div>
	       <div class="mui-input-row">
	           <label>密  碼:</label>
	           <input type="password" class="mui-input-clear" id="psw" placeholder="請輸入密碼"><span style="white-space:pre">	</span>//獲取密碼
	       </div></span>
<span style="font-size:18px;"></span><pre name="code" class="html"><span style="font-size:18px;"><span style="white-space:pre">		</span>//點擊是觸發onclick事件</span>
<button type="button" class="mui-btn mui-btn-blue" οnclick="init()">驗證登錄</button> </form> </div></body>bian //下面纔是要點<script type="text/javascript">function init(){var user=document.getElementById('name').value; //獲取表單提交過來的數據 var psw=document.getElementById('psw').value;mui.post('http://192.168.43.5/mapp/mtest/login.php', //請求,地址是服務器本機的ip地址{name:user, //要傳送的數據psw:psw},function(data){ //服務器返回數據回來時應該做什麼的函數if(data=="1"){plus.ui.toast("登錄成功");mui.openWindow({url:'login.html',})}else{plus.ui.toast("用戶名或密碼錯誤");}},'text'); }</script> </html>


其實這個界面都很簡單,,,需要注意的是請求的url地址,一定是服務器的本機的ip地址,我就是輸錯成127.0.0.1地址,在真機調試上不能請求。

下面來看看後端的代碼,我用的是php做後端


<span style="font-size:18px;"><?php 
   		header( "Access-Control-Allow-Origin:*");
		
		header('Access-Control-Allow-Methods:POST');  
// 響應頭設置  
		header('Access-Control-Allow-Headers:x-requested-with,content-type');  
      ini();
	
      function ini(){
      	$name=$_POST['name'];
		$psw=$_POST['psw'];
     // $post= json_decode($post,true);
       //echo "$post";
      
      if($name=='kevin'&&$psw=='5817321790'){
      	echo "1";
      }
	  }
	
?></span>

如果直接用電腦的瀏覽器訪問問題倒是不大,,,但是如果用真機調試,或者用另一個域的瀏覽器訪問,就必須加上這三個頭文件,這是跨域提示信息,如果沒有將會出錯。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章