muiajax交互php,HBuilder+MUI编写⼀个登录页⾯（Ajax交
互）
登录页⾯
那我们先构思⼀下登录页⾯都需要什么内容：⽤户名，密码，登录按钮。如果你有⼀个得⼒的美⼯，我们还可以加上酷炫的美⼯设计。
HBuilder提供⼀组UI组件，请参看这⾥：MUI。
对于⼀个熟悉web开发的⼈来说，上⾯的这些都太简单了，分分钟就可以搞定了。但是别忘了这是移动开发，与普通的浏览器应⽤还是有所不同。接下来我们来看看页⾯的布局应该怎么设计。
这⾥⼤家不要忘记⼀个原则，因为⽬前HTML5+ 的实现仅此⼀家(HBuilder)，所以我们在实现各种功能的时候，⼀定要遵循HBuilder官⽅推荐的⽅法。
接下来我们从⼀个index.html开始。
HBuilder默认⽣成的index.html⾥的meta部分，只有viewport⼀个属性：
Html代码
其次，我们要引⼊ mui 需要的 css，以及相应的 javascript ⽂件。
Html代码
如果你想问如果不⽤ mui 和默认的 app.js 可以吗？答案是肯定的。但是，你可能会遇到很多意想不到的问题。所以，对于⼀个界⾯组件mui 来说，个⼈如果你有强⼤的美⼯⼩伙伴，那么不⽤ mui 是完全可以的。但是 app.js ，还是最好⽤吧！
另外，按照官⽅的说法，尽量不要⽤ jquery等 js 类库，这会严重影响你的应⽤的速度。所以，请遵循官⽅的建议。其实在移动端现代浏览器上， jquery 也真的是可有可⽆了。
⾄此，HTML 的 head 部分就结束了。接着我们开始写body部分了。
按照官⽅的说法，页⾯中所有的内容都应该放⼊⼀个 div 中，并且这个 div 的class 应该是 "mui-content" --- 当然，这是你使⽤ mui 的时候。这⾥我们暂定会使⽤ mui 。
按照⼀般的⽅式，我们都会在窗⼝的底部加⼀个 copyright 之类的⽂字。按照标准的说法，我们需要有⼀个class="mui-bar mui-bar-tab"的 div，⽽且要注意：这个 mui-bar DIV ⼀定要放到 mui-content 之上。总之，最后的代码应该是这个样⼦：
Html代码
这是底部信息
上⾯的 mui-bar ⾥，⼜额外加了⼀些样式，⽤于控制⾼度，⼤家可以根据需要⾃⾏订制。
接下来，我们来放⼊⼀些 mui 的组件：输⼊框
Html代码
⽤户名
密码
登录
注册
这⾥的输⼊框和button 按钮都是 mui 提供的组件。我使⽤了⼀些 margin 等属性控制了⼀下位置。个⼈觉得，输⼊框组件还好，按钮组件的样式就⽐较⼀般了。如果你有好的美⼯，还是⾃⼰打造好看的按钮⽐较好。
在 html 对象的命名上，也秉承了⼀贯的原则，⽤唯⼀的ID 来标⽰⼀个对象。总之，这个内容对于有web开发经验的⼈来说，没有什么特别的地⽅。
⾄于你想让输⼊框垂直居中，请⾃⾏查“如何让 div 垂直居中”，解决⽅案是⼀样的。
接下来就是重头戏了，登录按钮如何与服务器进⾏交互？按照web开发的理解，有这么⼏种选择：
定义⼀个表单(form)，点击登录按钮的时候提交到后台。后台处理完毕后，显⽰新的页⾯给前端。
在登录按钮上绑定⼀个click⽅法。点击的时候，使⽤Ajax发送数据到后台，接受到数据后，前端页⾯更新。
对于⼀个⼿机应⽤，如果出现页⾯刷新，或者⼤⽩页这样的状态肯定是不好的体验。所以，在⼿机的HTML5开发中，我们绝对不会使⽤form 提交这样的东西的。可以肯定的说：我们只⽤ Ajax。
按照官⽅的说法，尽量不要使⽤JQuery，同时，也不要使⽤ onclick 这样的⽅式，取⽽代之应该使⽤的是绑定⼀个事件：
Js代码
处理内容；当然肯定是ajax 了。
});
这个事件的名字叫 ”tap“，也就是点击屏幕的事件。
那好学的同学肯定会问有多少个事件可以⽤啊？请参看这⾥：⼿势事件。这是mui 提供的⼀个特性--- 就这个特性来说，你很难不⽤ mui 这个组件，毕竟你⾃⼰再实现⼀个的话，⼜要费不少事。
那我们把这个事件的代码写在哪⾥好呢？最开始，还是最后边？都不是。
按照官⽅的说法，我们应该写在 mui 组件和页⾯组件全部加载完毕后 ---  就如同 JQuery⼀样，mui 也有⼀个 ready 的⽅法：
Js代码
mui.init();
mui.plusReady(
function() {
这⾥写上刚才的事件绑定⽅法。
}
);
到了这⾥，画⾯的部分基本完事了，整个代码⼤概是这个样⼦：
Html代码
测试
这是底部信息
⽤户名
密码
登录
注册
jquery是什么功能组件
mui.init();
mui.plusReady(
function() {
alert("点击了登录按钮");
});
}
);
这时，你可以把⼿机连接到电脑上，然后进⾏调试，就可以看到第⼀个登录的画⾯了。点击登录按钮，会弹出”点击了登录按钮“这个对话框。
对于mui，虽然你可以不使⽤mui 组件，但是⼀些基本的规则，例如 mui.init，mui.plusReady 这样的⽅法，还是要使⽤的。
另外，mui 的布局⽅案中没有垂直居中的⽅式(希望以后能增加上)，虽然⽅式有很多，但是仍然推荐这个：CSS Transform让百分⽐宽⾼布局元素⽔平垂直居中
接下来，我们就要实现登录按钮通过ajax与后台进⾏交互。
Ajax交互
接下来我们该完成客户端与服务器的交互的部分了，这种交互我们使⽤的是AJAX⽅式，页⾯不会因为刷新⽽现实⼤⽩页。
交互这部分可以分成两个部分：服务器端和客户端。
服务端以Java语⾔为例⼦(因为我只做过Java的)。其实 c#或者php等语⾔实现起来也都是基本⼀样的，可以当做参考。
如果你正在使⽤SpringMVC，那么就简单了，因为Spring已经封装了Ajax的调⽤⽅式。如果像我⼀样，没有使⽤SpringMVC，那么很遗憾，你需要⼀个能够解析json的库。经过⽐较，我选择了 jackson 这个⼯具。注意：在写这个⽂章的时间点，在⽹上搜索的jackson⽹站已经迁移到了github，所以，请使⽤本⽂提供的新的链接。
下⾯的例⼦也是基于jackson解析的。如果你使⽤了SpringMVC，或者其他解析json的⼯具，或者其他语⾔如PHP，应该也是差不多的。
下⾯来看⼀下⼀个登录过程的流程：
流程虽然⽐较多，但是很容易理解。先从客户端看起。
⾸先就是通过Ajax的⽅式，将⽤户名和密码发送给客户端。为了安全，我们不能直接发送明⽂的密码，必须将密码加密。可选择的⽅式很多，⼀般都是不可逆的hash⽅式，如md5, sha1的⽅式加密。在本例中我们选择 md5的⽅式加密。javascript⾥的md5现成的⽅法很多，⼤家⾃⼰寻⼀个合适的吧。但是标准就是：⼩，快，使⽤简单。
接下来就是ajax的使⽤。mui 提供了ajax的使⽤⽅法，请参看这⾥。 不过如果你按照⽂档那样，每个ajax调⽤都写那么⼀堆代码，⼀会你的代码就会臃肿不堪。所以，我对ajax调⽤⼜做了⼀个简单的封装，避免每次都设置相同的参数：
Js代码
function postData(url, data, callback, waitingDialog) {
mui.ajax(url,{
data:'data='+JSON.stringify(data),
dataType:'json',
type:'post',
contentType:"application/x-www-form-urlencoded; charset=utf-8",
timeout:60000,
success:callback,
error:function(xhr,type,errorThrown){
waitingDialog.close();
mui.alert("", "错误", "OK", null);
}
});
}
data 属性：就是要传递给服务端的数据。之所以要加上 'data=' 这个东西，就是为了让服务器端知道变量的名字是 "data" 。⽽传递的json 数据，也必须通过JSON.stringify⽅式转换成字符串。
contentType属性：这个很重要。如果没有这个，你在后台得到的中⽂字符串就会是乱码。其实如果你熟悉Jquery，对这个属性应该不会陌⽣。
error属性：出错的处理。这⾥的 waitingDialog 是⼀个等待的对话框。在点击登录按钮后，会显⽰⼀个等待的对话框。⽆论出错了，还是正常处理了，都必须要关闭这个等待的对话框。同时⽤ mui.alert 显⽰了⼀个错误的消息。
以上就是 ajax 的请求函数。
接下来看看登录按钮的处理：
Js代码
// 登录处理，还记得我们上⼀篇写得的按钮关联的事件吧
// 显⽰⼀个等待的对话框
var wd = plus.nativeUI.showWaiting();
/
/ 构造要传递的json数据
// $id 是⼀个通过 id 取得对象的⽅法，
// 内容就是 ElementById();
var data = {"userName": $id('username').value,
"userPassword":md5Hash($id('userpassword').value)
};
// 调⽤ajax
postData(SERVER_HOST + MODULE_LOGIN, //服务端的URL
data,// json 数据
function(data) {
wd.close(); // 调⽤成功，先关闭等待的对话框
sult != "checkOK") {
// 如果密码错误，提⽰⼀下信息

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。