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);
            }
           });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,981评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,466评论 25 708
  • 家里有娃儿,出去吃总感觉不卫生,为了孩子,我开始尝试自己下厨做各种好吃的。 前几天刷微博,看到羊肉泡馍,就开始筹划...
    张玥zhangyue阅读 458评论 0 1
  • 新项目开始也有一段时间了,由于工作以来几乎根本😫就没有大团队工作经验,所以关于架构方面的问题只能一点点慢慢摸索。虽...
    queuey阅读 1,010评论 1 7
  • 青蛙说,可以交这个月的思想汇报了,她等着批呢。我愣了一会儿,这个月个人状态总结:“阶段性踌躇满志,持续性混吃等死”...
    TiffanyYan37阅读 285评论 0 0