首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Ajax出现JS错误: TypeError:无法将属性'innerHTML‘设置为null (不是重复的,其他答案都不起作用)

Ajax出现JS错误: TypeError:无法将属性'innerHTML‘设置为null是因为在使用Ajax请求时,返回的数据为null,而在代码中尝试将返回的数据赋值给innerHTML属性,导致出现了类型错误。

解决这个问题的方法是在代码中添加对返回数据的判断,如果返回的数据为null,则不执行赋值操作。可以使用if语句或者三元表达式来进行判断。

以下是一个示例代码:

代码语言:txt
复制
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 发送Ajax请求
xhr.open('GET', 'url', true);
xhr.send();

// 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var responseData = xhr.responseText;

    // 对返回的数据进行判断
    var element = document.getElementById('elementId');
    if (responseData !== null) {
      element.innerHTML = responseData;
    }
  }
};

在上述代码中,我们首先创建了一个XMLHttpRequest对象,并发送了一个Ajax请求。然后,我们通过监听请求状态变化的事件,在请求成功并返回数据时,对返回的数据进行判断。如果数据不为null,则将其赋值给指定的元素的innerHTML属性。

需要注意的是,这只是一个示例代码,实际应用中需要根据具体情况进行修改和优化。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云对象存储(COS)、腾讯云云数据库MySQL版、腾讯云CDN加速等。您可以通过腾讯云官方网站(https://cloud.tencent.com/)了解更多关于这些产品的详细信息和使用指南。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 常见的8个前端防御性编程方案

    ,整个系统不够健壮,从而会出现白屏,或者业务系统异常,用户误操作等 那么,就出现了前端防御性编程 常见的问题和防范 1.最常见的问题: uncaught TypeError: Cannot read property...js对象中的未初始化属性值是undefined,从undefined读取属性就会导致这个错误(同理,null也一样) 如何避免?...3.错误边界(Error Boundaries,前端出现未知错误时,展示预先设定的UI界面) 以React为例 部分 UI 的 JavaScript 错误不应该导致整个应用崩溃,为了解决这个问题,React...错误边界是一种 React 组件,这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误,并且,它会渲染出备用 UI,而不是渲染那些崩溃了的子组件树。...innerHTML 容易出现安全漏洞,例如接口返回了一段JavaScript脚本,那么就会立即执行。

    1.1K20

    论egret的坑

    为了弥补小小的失落,还是决定自己写一套吧(代码放在最底部),下面的就是摘自网上的,然后又js改成的ts版ajax: //使用 ajax({ url: url, method: "GET",...点击事件被拦截:设置group的touchThrough为true 如果希望group超出部分被遮挡,就应该设置scrollEnable为true 最坑的是,自定义控件设置宽高为100%,编译后可能报错...[warning] EXML解析错误 ScreenSkin: 无法将'string'类型的值赋给属性:'preview:undefined' 在exml是这样写的: 起作用,这个答案在网上根本找不到答案,不过现在有了,呵呵 资源加载坑 资源加载本身是没有坑的,但是游戏或者网站升级有有坑了,因此有必要在资源路径后面加个随机数参数: main.js...; public constructor(msg: string | null) { this.name = "Ajax错误"; this.msg

    1.6K10

    Web前端-JavaScript基础教程上

    null在JavaScript中表示空值,null的typeof运行为字符串object。null为特殊的对象值,含义为非对象。 null类型的唯一一个成语,它表示数字,字符串和对象是“无值”的。...,就不是同个地址了 Object.freeze对象冻结 const foo = Object.freeze({}); // 下面一行不起作用; // 会报错 foo.prop = 12; 顶层对象 window.a...可以用innerHTML代替dom操作,减少dom操作次数,优化js性能。 可以多用className,少用全局变量,缓存dom节点。...效果 ajax的过程,创建XMLHttpRequest对象,创建一个异步调用对象,创建新的HTTP请求,并指定HTPP请求的方法,url以及验证信息,设置响应HTTP请求状态变化的函数,发送HTTP请求...ajax不可以跨域获取数据,可以获取文件内容,使用js脚本,函数调用,调用的参数为服务器返回的数据。

    2.2K30

    JavaScript基础学习--02属性操作

    二、属性操作要点: 1、属性获取直接以(obj.属性名)的方式,注意点是属性名不可出现(-),以驼峰法变幻,如(Odiv.font-size 错误!...--》Odiv.fontSize) 2、class 不是属性(width、src、style),也不是关键字(var),而是保留字,所以Object.class=XX错误,--》Object.className...属性动态修改。     解决办法:点击后将input type=‘button’隐藏,显示checkbox即可。...7、js中允许所有(.)替换成(【】),且(.)后面的值无法修改(必须是非变量),      如:var thisVal = oAttr.value;  ob.style.thisVal = XX 错误...,再“回调”执行ajax(此时中断其他正在执行的代码《如果有正在执行的代码的话》),最后再执行剩余代码。

    1.8K90

    求职 | 史上最全的web前端面试题汇总及答案2

    null: (1) 作为函数的参数,表示该函数的参数不是对象。 (2) 作为对象原型链的终点。...3.for循环时,每次取出一个元素与对象进行对比,如果这个元素不重复,则把它存放到结果数组中,同时把这个元素的内容作为对象的一个属性,并赋值为1,存入到第2步建立的对象中。...①addClass:为元素设置class属性,如果该元素已经存在class属性,则在其值后添加空格及新的class值。 ②css:操作元素的style属性的方法。 9、如何获取一个元素的实际位置?...(3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。 (4) 当需要设置的样式很多时设置className而不是直接操作style。...②垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。

    6.1K20

    关于ajax学习笔记

    一、什么是AJAX,为什么要使用Ajax(请谈一下你对Ajax的认识) ajax全称Asynchronous JavaScript and XML(异步的javascript和XML),为什么会有这么一种技术的出现呢...501 Internal Server Error服务器遇到一个错误,使其无法对请求提供服务 这是比较齐全的状态表: ?...所以,如果想在函数内,向全局暴露顶层变量,只需要把顶层变量设置为window对象的属性。 越是大的项目,越需要让全局变量越少越好。这是为了防止不同工程师之间的程序,命名冲突。...+ timestamp,function(err,data){ alert(data); }); 总的来说,原理就是通过将 get 请求的 url 做成每次都不一样,这样就不会被浏览器缓存了。...比如今天又53页,明天就有55页了,所以你的JS里面无法写死一个文章总页数。所以办法就是,请求下去,请求到page.php?

    1.8K20

    【java项目实践】详解Ajax工作原理以及实现异步验证用户名是否存在+源码下载(java版)

    随着Ajax的出现使web应用程序变得更完善,更友好。 好,还等什么呢?让我们来一起看看Ajax的强大功能。...JS部分的代码: var xmlHttp; function createXMLHttpRequest() { //表示当前浏览器不是...userId=" + trim(field.value) + "&time=" + new Date().getTime(); //设置请求方式为GET,设置请求的URL,设置为异步提交...xmlHttp.open("GET", url, true); //将方法地址复制给onreadystatechange属性 //类似于电话号码 xmlHttp.onreadystatechange...总结 Web开发一直在追求界面友好,人性化,较高的用户体验度以及更加美观等等,我相信只要从点点滴滴做起,任何问题都不是问题。

    78310

    熬夜7天,我总结了JavaScript与ES的25个重要知识点!

    TypeError;b,对不可配置的属性使用delete操作符会抛出TypeError;c,为不可扩展的对象添加属性会抛出TypeError。...重名属性情况:a,非严格模式下没有错误,以第二个属性为准;b,严格模式下会抛出语法错误。 函数参数必须唯一,重名参数,在非严格模式下没有错误,只能访问第二个参数;严格模式下,会抛出错误。...和null无法转成对象,所以如果它们作为参数,就会报错 如果undefined和null不在首参数,就不会报错 如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用(这个对象的任何变化,...|| target === null) { throw my TypeError('error'); } // 将第一个参数转为对象(不是对象转换为对象) const targetObj =...Promise对象创建时可能是未知的,它允许你为异步操作的成功和失败分别绑定相应的处理方法,这让异步方法可以像同步方法那样返回值,但并不是立即返回最终执行结果,而是一个能代表未来出现的结果的promise

    1.8K30

    16期-熬夜7天,我总结了JavaScript与ES的25个重要知识点!

    TypeError;b,对不可配置的属性使用delete操作符会抛出TypeError;c,为不可扩展的对象添加属性会抛出TypeError。...重名属性情况:a,非严格模式下没有错误,以第二个属性为准;b,严格模式下会抛出语法错误。 函数参数必须唯一,重名参数,在非严格模式下没有错误,只能访问第二个参数;严格模式下,会抛出错误。...和null无法转成对象,所以如果它们作为参数,就会报错 如果undefined和null不在首参数,就不会报错 如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用(这个对象的任何变化,...=== null) { throw my TypeError('error'); } // 将第一个参数转为对象(不是对象转换为对象) const targetObj = Object(target...Promise对象创建时可能是未知的,它允许你为异步操作的成功和失败分别绑定相应的处理方法,这让异步方法可以像同步方法那样返回值,但并不是立即返回最终执行结果,而是一个能代表未来出现的结果的promise

    65820

    Ajax 技术学习 (Java EE 实现) —— 用户账户的验证

    这个函数中,会检查请求的状态,如果请求的状态完成,并且没有发现服务端出现错误,那么将会从该服务器返回的数据进行处理并通常以某种形式显示输出到页面上 —— JavaScript 学习指南(第二版) 1.2...+ ajax 来实现 2.1 简单的使用 ajax ,验证用户名是否合法 我们要实现一个简单的功能,我们注册用户名为 admin 的时候,系统会显示账号已经被注册,输入其他账号,系统可以正常运行 2.1.1...设置在服务器完成后要运行的回调函数 2. 设置请求信息 3....username='+username); 回调函数中,我们最后发送数据的时候,传递的参数为 null 即可:xmlhttp.send(null) 备注: 我们使用 get 请求的时候,可以不用传递头参数...正常注册 三、学习补充 3.1 问题记录 在 编写 ajax 的时候,遇到了第一个 bug,那就是 前端传值为 [object, object] 各种方法百试都不灵,当我们 ajax 的 js 代码重新细化了一遍之后

    1.8K30

    ASP.NET 调味品:AJAX

    您应该记住 JavaScript DataView 只不过是实际 DataView 的副本,目前除了能够遍历行和访问列值以外不支持其他更多功能(例如设置 RowFilter 或 Sort 属性的功能)。...我们将利用 AJAX 让用户有更愉快的锁定机制体验。首先,我们将创建用户尝试编辑但无法编辑(因为其他用户正在编辑该文档)的文档队列,当这些文档可用时自动通知用户。...if (notifyBox == null || notifyTable == null) { return; } //如果服务器端代码出现异常 if (response.error !...目的是尝试帮助用户自己找到问题的答案,以及限制重复发布的数量。一般来说,用户在论坛中提出新问题时,他或她会输入主题和问题。他们通常都不会先进行搜索,来查看是否已经提出和回答过该问题。输入 AJAX。...但是,只向现有的应用程序添加启用 AJAX 功能时要小心操作。正在进行实际搜索的预先存在的 ForumSearch 类可能并不是为我们介绍的使用类型设计的。

    3.7K50

    2、原生AJAX

    只能发送字符串和buffer【其他形式强行转换为字符串发送】 但是并不是我们需要得到的 对象格式 例:后台传一个 对象 ,那么页面显示的是下面的形式【字符串】 JSON.stringify()方法...:将一个 JS对象或值转换为 JSON 字符串 ********************************** ajax *********************************...1、手动对数据转化 (在ajax将从服务器得来的 字符串 -> 对象 ) JSON.parse()方法:将JSON格式字符串转换为JS对象 2、 自动转换 (借助xhr对象上面的一个属性responseType...在服务端server.js上开启一个为3s的定时器,时间到了后,才send返回。...6、AJAX取消请求 在服务端server.js上开启一个为3s的定时器,时间到了后,才send返回。

    8310

    JavaScript基本入门教程

    : 1.145 3.1452 分析: 对于减号运算符,因为字符串不支持减法运算,所以自动将字符串转换成数值 对于加号运算符,因为字符串可以用加号作为连接运算符,所以自动将数值转换为字符串 其他类型的数据之间的转换可以自行实验...局部变量:只能在方法中起作用,出了方法,就不起作用了,但是,有一点必须注意,那就是在方法中没有代码块的概念,也就是说,在方法的代码块中定义的局部变量,在整个方法中都是可以使用的,不限于在代码块中。...属性/方法 说明 encodeURI() 将字符串编码成URI decodeURI() 将编码好的URI解码成原本的字符串 代码案例: 属性:类属性是类的属性,只有通过类名来调用,无法通过对象来调用,对象调用的时候就会出现undefined。 局部变量:在函数内可用,出了函数就不可用。...p2的一致,这是因为类属性改变后,所有的该类属性都会变化,但是作为对象的属性,对象创建完成以后就不会再变了 动态地为某个对象添加属性,或者方法,它们只属于这个对象,其他的对象则不会享受这样的属性和方法,

    4.1K20

    前后端交互的弯弯绕绕

    傻傻呼呼让人头疼本篇文章学习至: 黑马前端AJAX入门到实战 ✅官方文档也超级细致,细致到都不用看视频都能看懂了Axios 快速上手Axios框架全称 Ajax – I/O – system 官方文档不是一种新技术...请求,send({});参数是通过请求体携带的数据,而GET请求是通过请求头携带数据的,所以要把send的参数置为null处理服务器响应: 通过监听 XMLHttpRequest 对象的 onreadystatechange...fulfilled,并且返回值会作为 Promise的结果;如果函数抛出错误,Promise 的状态将变为 rejected,并且抛出的错误会作为 Promise 的结果;Await: await 关键字用于等待一个...入门到实战 ✅黑马的官方文档超级细致,细致到都不用看视频都能看懂了 是不是我的技术提升的原因呢?...的区别|优缺点草稿区:黑马程序员前端AJAX入门到实战 ✅黑马的官方的文档确实细致,细致到都不用我在补充都能看懂了,是不是我的技术提升的原因呢?

    11220

    JavaScript 进阶问题列表

    (除了基本类型之外其他都是对象) 函数是一个特殊的对象。你写的这个代码其实不是一个实际的函数。函数是一个拥有属性的对象,并且属性也可被调用。 ---- 11. 输出是什么?...我们试图将一个对象 b 设置为对象 a 的键,且相应的值为 123。 然而,当字符串化一个对象时,它会变成 "[object Object]"。...当我们传递参数时,这与之前定义的变量 x 不同 。这个 x 是属于 catch 块级作用域的。 然后,我们将块级作用域中的变量赋值为 1,同时也设置了变量 y 的值。...将首个元素赋值为变量person。当设置两个对象彼此相等时,它们会通过 引用 进行交互。但是当你将引用从一个变量分配至另一个变量时,其实只是执行了一个 复制 操作。...---- 答案: B 返回属性的时候,属性的值等于 返回的 值,而不是构造函数中设定的值。

    1.3K10

    Ajax全接触-imooc

    Ajax介绍  同步——客户端发起请求,服务端需要处理,响应,此时客户端完全等待,当服务器处理完毕,客户端重新载入页面,如果出现错误,再次发生请求,处理,等待......什么是跨域呢,简单理解就是因为JS同源策略的限制,a.com域名下的JS无法操作b.com或c.com域名下的对象 子域名不相同,端口不同,协议不同,也会被认为是跨域,HTTP访问的80端口,HTTPS...,*为所有域 header('Access-Control-Allow-Methods:POST,GET'); //设置接收的请求方式 封装一个Ajax function ajax(method,url....ajax中有个dataType属性,将该属性设置 dataType:"jsonp" 就能实现JSONP跨域了 $(function(){ $("#btn").click(function...,而是里面的实质内容,要加载的文件也不需要管是不是.js结尾,而是内部是否为合法的JS内容; 2.用script标签加载资源是没有跨域问题的,比如加载jQuery; 3.在资源加载进来之前定义好一个函数

    5.7K20

    京东前端常考面试题(附答案)

    预编译四部曲为:创建AO对象找形参和变量声明,将变量和形参作为AO属性名,值为undefined将实参和形参相统一在函数体里找到函数声明,值赋予函数体。最后程序输出变量值的时候,就是从AO对象中拿。...同源政策主要限制了三个方面:当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。...当前域下 ajax 无法发送跨域请求。...同源政策的目的主要是为了保证用户的信息安全,它只是对 js 脚本的一种限制,并不是对浏览器的限制,对于一般的 img、或者script 脚本请求都不会有跨域的限制,这是因为这些操作都不会通过响应结果来进行可能出现安全问题的操作...具体是通过将这个对象的原型设置为另外一个对象,这样根据原型链的规则,如果查找一个对象属性且在自身不存在时,就会查找另外一个对象,相当于一个对象可以使用另外一个对象的属性和方法了。

    1.1K20
    领券