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 functionundefined 尝试在$(document).ready( function () 中使用$.ajax ? @SrikanthJeeva,我已经尝试过了,但不幸的是没有运气......我遇到了同样的错误。 有人在这里报告了类似的错误。你试过这个吗? ***.com/questions/41092662/… 【参考方案1】:

根据我的经验,这种类型的问题通常是因为您的转译没有像您预期的那样工作 - 或者您在转译代码的同时还使用了 jquery(或任何其他库),通过 CDN 链接包含它.如果是这种情况,这里有一些信息可能会帮助您解决问题:

首先,检查您的转译器是否确实将jquery 拉入。仅将其放在页面上并不一定允许此代码工作 - 因为当您的转译器运行时:

import $ from 'jquery'

它将首先从node_modules 加载jquery 包,然后为其创建一个内部名称,例如$_1,它将在您的包中使用。如果您打算通过 CDN 在页面上包含 jquery,而不是以这种方式捆绑它,则需要在您的 webpackrollup 配置中将其标记为 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-fetchReact 应用程序中进行ajax 调用。

【讨论】:

问题是来自console.log($.ajax)_jquery2.default.ajax is not a functionundefined @SrikanthJeeva 更新了答案

以上是关于Ajax 调用返回未定义的主要内容,如果未能解决你的问题,请参考以下文章

Ajax 调用总是以未定义的形式返回并且没有到达后面的代码

来自 .ajax() 调用的数据的 jQuery .find() 返回未定义

Struts 2 操作未将所需结果返回给 Jquery Ajax 调用

ajax返回一个空请求(未定义的索引)[重复]

带有 asp.net aspx 的 Ajax 返回未定义

如何从 ajax 调用自动创建复选框(当前未定义)