美文网首页
Hbuilder混合开发数据交互001

Hbuilder混合开发数据交互001

作者: cj2527 | 来源:发表于2016-08-22 00:02 被阅读1348次

    一、用户登录验证 (给服务器提交数据)

    //输入maj,然后回车键,一堆代码就自动出来了,爽asdf
    mui.ajax(url,{
        data:{
            username:'admin',
            password:'123456'
        },
        dataType:'json',//服务器返回json格式数据
        type:'post',//HTTP请求类型
        timeout:10000,//超时时间设置为10秒;
        success:function(data){
            //服务器返回响应,根据响应结果,分析是否登录成功;
             console.log(‘登录成功’);//这里不做验证,只是测试访问
        },
        error:function(xhr,type,errorThrown){
            //异常处理;
            console.log(type);
        }
    });
    

    二、读取数据库,然后写入列表 (从服务器解析JSON数据)
    1.首先在某个位置,例如底部放置一个ul,给个ID。
    <div class="mui-bottom">
    <ul class="mui-table-view" id="list">
    //这里应该有li项的,但我们让它自动生成,数据有多少行,li就有多少个
    </ul>
    </div>

    2.读取数据库中的数据

                   mui.ajax(url,{//url可以是一个php接口文件
                data:{
                },
                dataType:'json',//服务器返回json格式数据
                type:'post',//HTTP请求类型
                timeout:10000,//超时时间设置为10秒;
                
                    success:function(data){
                      
      //可以直接解析JSON,浏览器控制台输出来,例如谷歌浏览器,按F12,选择控制台窗口就可以看到输出了。
                   // console.log(JSON.stringify(data)); 
                    
    
                    //下面才是重头戏,动态输出li选项
                    var list = document.getElementById("list");
                    var fragment = document.createDocumentFragment();
                    var li;
                    
                   //遍历获得的数据集data
                mui.each(data,function (key,value) {
              
                    //定义变量接收数据库字段的值
                    var id  = value.id;
                        title = value.title;
                      detail = value.detail;
                  
                        li = document.createElement('li');
                        li.className = 'mui-table-view-cell mui-media';
                        li.innerHTML = '<a class="mui-navigate-right" id='+ id +' data-audio='+ name +'>'+
                                         
              '<div class="mui-media-body">'+title+
                        '<p class="mui-ellipsis">'+detail+'</p>'+
              '<p class="mui-ellipsis">途径:A站,广州站</p>'+
                                            '</div>'+
                                        '</a>';
                        fragment.appendChild(li);
      
                })
                  list.appendChild(fragment);
                },
    
     error:function(xhr,type,errorThrown){
                    alert("错误");
                    console.log(type);
                }
               });
    

    相关文章

      网友评论

          本文标题:Hbuilder混合开发数据交互001

          本文链接:https://www.haomeiwen.com/subject/sppwsttx.html