zoukankan      html  css  js  c++  java
  • ajax请求拿到多条数据拼接显示在页面中

    首先我们拿到的了一坨Json数据

    如下

     

    然后通过ajax请求拿到数据

    在ajax的success方法中处理和使用数据:

    其中包括:

    用eval处理这种数据

    var outStr = eval('('+data.data+')');

    用循环取出数据并使用

    $.each(outStr,function(index){
    console.log(outStr[index].username);
    }

    综上代码:

    componentDidMount (){
    var _this =this;
    $.ajax({
    async:false,
    type:"POST",
    url:"http://localhost:1111/api/Users/all",
    dataType:"Json",
    data:{
    "username":"",
    },
    success:function(data){
    console.log("调用成功");
    console.log(data.statusCode);
    //拿到数据后用eval函数处理
    var outStr = eval('('+data.data+')');
    //循环取出数据,并拼接 $.each(outStr,
    function(index){ var sexStr = "";
    //数据库中的数据1是男 0是女 outStr[index].sex
    == 1?sexStr = "Male":sexStr = "FeMale"; if(outStr[index].username!=localStorage.getItem("username")){ //需要拼接的内容 var htmlStr = '<div class = "userM_info">'; htmlStr += ' <div class = "userM_infoBox">'+outStr[index].name+'</div>'; htmlStr += ' <div class = "userM_infoBox">'+sexStr+'</div>'; htmlStr += ' <div class = "userM_infoBox">'+outStr[index].phoneNum+'</div>'; htmlStr += ' <div class = "userM_infoBox">'+outStr[index].address+'</div>'; htmlStr += ' <div class = "userM_fork"></div>'; htmlStr += ' </div>'; //拼接到需要的div中 $('.userM_content_data').append(htmlStr); } }) }, error:function(err){ } });
    }

     最后我的页面中能显示

     

  • 相关阅读:
    root用户没有权限编辑其他用户处理
    php中 被遗忘的函数
    erlang file操作(IO编程)
    Linux下的MySQL自动备份脚本
    这就是传说中让理科生沉默,让文科生落泪的文理综合体(转)
    LINUX 忘记root密码
    php中 被遗忘的函数
    分页显示的常用操作方法
    php 接口类:interface
    php垃圾回收机制分析
  • 原文地址:https://www.cnblogs.com/RikuBlog/p/9530753.html
Copyright © 2011-2022 走看看