開發(fā)環(huán)境

1.mac系統(tǒng)

2.AppCan集成開發(fā)工具Mac版本

開發(fā)過程

1.新建AppCan項目,選擇空模板

07270177-406B-4068-8F59-7FB25D9E916A.png

2.右鍵點擊index.html預覽，會在模擬器打開

3.修改標題，就在index.html中修改AppCan變?yōu)榈卿?/p>

4.鼠標輸入放在index_content.html的body下，點擊菜單欄中的AppCan，文本輸入，選擇登錄表單，就會自動生成代碼

修改下文字，文本框和按鈕增加id屬性

登錄

C8B303C0-A6CC-4E4E-9A4D-7D4F2A3578D6.png

5.增加按鈕點擊事件

找到這一段

appcan.ready(function() {

appcan.initBounce();

})

在它下面復制以下代碼

//這里是按鈕事件#submit是按鈕的id,ani-act是動畫效果

appcan.button("#submit", "ani-act", function() {

console.log('按鈕點擊');

})

右鍵預覽index.html文件，然后右鍵點擊審查元素，再彈出的界面，選擇console，進入控制臺窗口

DB8DAD3D-D58E-46F5-87C3-22C1ECEFA128.png

點擊按鈕，就會看到有提示輸出。

6.新建AppCan頁面，選擇空模板，內容也為空，my.html

7.添加一個方法，用來做網(wǎng)絡請求，登錄驗證，成功就跳轉到主頁面my.html

//登錄功能

function login(){

var phone = $("#phone").val();//根據(jù)文本框id

var password = $("#pwd").val();//根據(jù)文本框id

//數(shù)據(jù)請求

appcan.request.ajax({

url:'http://這是你自己的網(wǎng)絡后臺接口/sqlOperation.php?username='+phone+'&password='+password+'&operation=login',

type:'get',

dataType:'json',

success:function(data,status,xhr){

console.log(data.userName);//根據(jù)后臺接口返回的字段，一定要有userName

//頁面跳轉

appcan.window.open({

name:'my',

data:'my.html',

aniId:10

})

},

error:function(xhr,status,errMessage){

console.log('error');

}

});

};

修改按鈕事件

//這里是按鈕事件#submit是按鈕的id,ani-act是動畫效果

appcan.button("#submit", "ani-act", function() {

// console.log('按鈕點擊');

login();

})

總結

以上是生活随笔為你收集整理的appcan ajax mysql_AppCan之登录功能001的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。