快速解决ajax传递为空但显示在页面上为undefined的问题

 更新时间:2018年08月11日 10:53:24   作者:我要在家里  
今天小编就为大家分享一篇快速解决ajax传递为空但显示在页面上为undefined的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

昨天写代码遇到一个问题,这个问题以前也遇到过,只不过那时以为简单就没做什么笔记,结果昨天遇到还是要去查百度,查百度又要找好一会儿,所以就记录一下。避免以后忘记。

首先问题是这样的:我用ajax到动态的做表格插入,从后台传回来一个对象的list集合,然后进行遍历动态的生成表格的行。后台写的都正确的,结果表格有些内容为显示为undefined。后来我调试了一下发现ajax自动的把为空的字段设成了undefined。

//这是修改后的ajax代码
 $("#ss").click(function(){
    var key = $("#firstname").val();
    if(key==''){

     alert("请输入内容查询!");
     return;
    }
    $.ajax({
    url:'${pageContext.request.contextPath}/door/searchBykey.do',
    type:'post',
    dataType:'json',
    data:{'key':key},
    success:function(data){

     $("table>tbody>tr").remove();
     for(var i=0;i<data.length;i++){
      var count = i+1;
      var doors = data[i].door;
      var str = doors.replace(/\#/g,"%23"); 
      $("table>tbody").append(
         '<tr><td>'+count+'</td>'+ 
         '<td>'+ (data[i].build==undefined?"":data[i].build)+'</td>'+
         '<td>'+ (data[i].room==undefined?"":data[i].room)+'</td>'+
         '<td>'+ (data[i].door==undefined?"":data[i].door)+'</td>'+
         '<td>'+ (data[i].conSn==undefined?"":data[i].conSn)+'</td>'+
         '<td style="width:131px;">'+
          '<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal2" onclick="updatebutton('+str+')">'+"修改"+'</button>'+
         '<button type="button" class="btn btn-danger" onclick="delButton('+data[i].id+')">'+"删除"+'</button>'+
         '</td>'+ 
         '</tr>'
      );




     }


    },
    error:function(){
     alert("请求失败!");
    }
    });


   });

这个问题的解决方法很简单 ,就是将你的值判断一下是否为undefined,如果为undefined的,就将这个值设置为空就好了

具体代码

(data[i].room==undefined?"":data[i].room)

以上这篇快速解决ajax传递为空但显示在页面上为undefined的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 关于Ajax跨域问题及解决方案详析

    关于Ajax跨域问题及解决方案详析

    这篇文章主要给大家介绍了Ajax跨域问题以及解决方案的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Ajax具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • ajax实现分页和分页查询

    ajax实现分页和分页查询

    本文主要介绍了ajax实现分页和分页查询的相关知识,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • jQuery Ajax的readyState和status的区别和使用详解

    jQuery Ajax的readyState和status的区别和使用详解

    在前几篇分析了jquery的ajax异步和同步,以及异常的一些处理,感觉还没有把ajax的readyState和status说清楚.今天就来说说ajax状态的那点事,非常不错,对ajax readystate和status区别和使用感兴趣的朋友一起学习吧
    2017-03-03
  • 浅析json与jsonp区别及通过ajax获得json数据后格式的转换

    浅析json与jsonp区别及通过ajax获得json数据后格式的转换

    一言以蔽之,json返回的是一串数据;而jsonp返回的是脚本代码(包含一个函数调用);接下来通过本文给大家介绍json与jsonp区别及通过ajax获得json数据后格式的转换,需要的朋友参考下
    2016-03-03
  • 利用 Linq+Jquery+Ajax 实现异步分页功能可简化带宽压力

    利用 Linq+Jquery+Ajax 实现异步分页功能可简化带宽压力

    网上的分页方法甚多,但都太过于消耗带宽,所以我想到了用Ajax来分页,利用返回的Json来处理返回的数据,大大简化了带宽的压力
    2014-05-05
  • 解决Ajax方式上传文件报错

    解决Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation"

    这篇文章主要介绍了Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation",非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • javascript Ajax 类实现代码

    javascript Ajax 类实现代码

    Ajax已经如日中天,针对Ajax的框架也比比皆是,这里还是献献丑,提供一份06年自己写的Ajax封装类。
    2009-07-07
  • laypage前端分页插件实现ajax异步分页

    laypage前端分页插件实现ajax异步分页

    layPage是一款多功能的js分页组件,即适用于异步分页,又可用于传统的整页刷新跳页,还支持信息流加载,并且可无缝迁移至Node.js平台,这篇文章主要介绍了laypage前端分页插件,实现ajax异步分页,需要的朋友可以参考下
    2016-05-05
  • Ajax实现上传图像功能的示例详解

    Ajax实现上传图像功能的示例详解

    这篇文章主要介绍了如何利用Ajax实现上传图像,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-04-04
  • pushState实现Ajax无刷新页面切换

    pushState实现Ajax无刷新页面切换

    这篇文章主要介绍了pushState实现Ajax无刷新页面切换的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11

最新评论