Ajax 调用返回未定义
Posted
技术标签:
【中文标题】Ajax 调用返回未定义【英文标题】:Ajax call returns undefined 【发布时间】:2018-02-20 03:35:02 【问题描述】:我正在尝试进行 API 调用,但 Ajax 不是函数时出现以下错误:
import $ from 'jquery';
const apiCall = function ()
var url = 'https://images.nasa.gov/#/search-results';
var request =
q: 'sun',
media_type: 'image'
;
var result = $.ajax(
url: url,
dataType: 'json',
data: request,
type: 'GET'
)
.done(function()
alert(JSON.stringify(result));
)
.fail(function()
alert('failed');
)
module.exports = apiCall;
我在另一个模块中导入上述内容,并在 react 的 render() 函数中单击按钮调用它,例如:
import apiCall from './../api/apiCall';
class Gallery extends React.Component
render ()
return (
<section id="gallery" className="g-site-container gallery">
<div className="grid grid--full">
<div className="gallery__intro">
<Button extraClass=""
type="button"
handleButtonClick=apiCall />
</div>
</div>
</section>
)
module.exports = Gallery;
对我做错了什么有什么想法吗?
【问题讨论】:
有什么错误?如果您不告诉我们问题是什么,则无法解决问题。 嗨@gravityplanx,在第一行告诉你,我从console.log($.ajax)
得到_jquery2.default.ajax is not a function
和undefined
尝试在$(document).ready( function ()
中使用$.ajax ?
@SrikanthJeeva,我已经尝试过了,但不幸的是没有运气......我遇到了同样的错误。
有人在这里报告了类似的错误。你试过这个吗? ***.com/questions/41092662/…
【参考方案1】:
根据我的经验,这种类型的问题通常是因为您的转译没有像您预期的那样工作 - 或者您在转译代码的同时还使用了 jquery
(或任何其他库),通过 CDN 链接包含它.如果是这种情况,这里有一些信息可能会帮助您解决问题:
首先,检查您的转译器是否确实将jquery
拉入。仅将其放在页面上并不一定允许此代码工作 - 因为当您的转译器运行时:
import $ from 'jquery'
它将首先从node_modules
加载jquery
包,然后为其创建一个内部名称,例如$_1
,它将在您的包中使用。如果您打算通过 CDN 在页面上包含 jquery
,而不是以这种方式捆绑它,则需要在您的 webpack
或 rollup
配置中将其标记为 external
。如果使用webpack
,它看起来像:
entry: '/path/to/your/application.js',
externals:
'jquery': '$',
这实际上告诉 webpack,“当我从 'jquery'
导入时,不要查看 node_modules
- 相反,假设 jquery
已经作为 window.$
存在于页面上。现在,webpack
不会” t 尝试包含和捆绑所有 jquery
库 - 而不是创建 $_1
它实际上会尊重 $
是什么。
如果您确实打算加载和捆绑jquery
作为构建的一部分(不推荐,因为它会导致令人难以置信的大小膨胀) - 我建议确保它安装在@ 987654342@。你可以这样做:
npm install -S jquery
或者,如果您使用的是yarn
:
yarn add jquery
现在,您的 import
语句应该在您重新编译时正确加载库。
【讨论】:
【参考方案2】:首先,确保您没有使用jquery-lite,因为它排除了ajax
功能。
顺便说一句,不建议同时使用 exports.module
和 ES6 的 import / export
。尝试只使用其中之一。不太确定,但它可能会导致一些难以理解的module
麻烦。
另外,根据$.ajax官方文档,需要在回调中处理数据
$.ajax(
url: url,
dataType: 'json',
data: request,
type: 'GET'
)
.done(function(data)
// Process data provided from callback function
alert(data);
)
.fail(function()
alert('failed');
)
我个人更喜欢isomorphic-fetch 在React
应用程序中进行ajax 调用。
【讨论】:
问题是来自console.log($.ajax)
的_jquery2.default.ajax is not a function
和undefined
@SrikanthJeeva 更新了答案以上是关于Ajax 调用返回未定义的主要内容,如果未能解决你的问题,请参考以下文章
来自 .ajax() 调用的数据的 jQuery .find() 返回未定义