Ajax 调用返回未定义

Posted 2023-02-22

【中文标题】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 更新了答案