Hbuilder混合开发数据交互001

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

//输入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);
            }
           });