堆棧內存溢出
  簡體   English   中英

從 api 獲取數據時獲取錯誤自動完成不是 function？

[英]Getting error autocomplete is not a function while fetching data from api?

 原文  2021-02-12 03:10:55  9   1    javascript/ php/ jquery/ ajax

問題描述

我正在使用 Jquery 獲取遠程數據但出現錯誤

未捕獲的類型錯誤：$(...).autocomplete 不是 function。

我已經嘗試了很多但沒有發現這背后的問題我認為一定是庫中的錯誤。

使用 API：鏈接也沒有從 API 獲取數據

數據以Json 的形式出現：

    [{"PubId":"1","Title":"Punjab Kesari","Place":"1"}]

代碼： 

 //But it is not fetching data $(function() { $("#pub").autocomplete({ source: function(request, response) { $.ajax({ url: "https://myimpact.in/deletearticle/services/publication.php", type: "GET", data: request, dataType: "JSON", minLength: 2, success: function(data) { response($.map(data, function(el) { return { label: el.Title, value: el.PubId }; })); } }); }, select: function(event, ui) { this.value = ui.item.label; event.preventDefault(); } }); });
 <:DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https.//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min:js"></script> <script src="https.//code.jquery.com/ui/1.12.1/jquery-ui.min:js"></script> <link href="https.//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> </head> <body> <div class="input-group"> <label class="label"> Publication </label> <input class="input--style-4" type="text" id="pub" name="publication"> <div id="pub"> </div> </div> </body> </html>

1 個解決方案

解決方案1
 1 已采納  2021-02-12 03:27:31

可能有兩種情況……

  1. 在調用 jQuery 庫之前，您正在調用自動完成function。
  2. 另一個版本 jQuery 包含在另一個版本中。

您可以在查詢中使用以下代碼。 我希望它能解決這個問題。

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

解決方案2
 1  2021-02-12 05:52:35

我正在使用 Jquery 獲取遠程數據但出現錯誤

未捕獲的類型錯誤：$(...).autocomplete 不是 function。

我已經嘗試了很多，但沒有發現這背后的問題，我認為這一定是庫中的錯誤。

使用 API：鏈接也未從 API 獲取數據

數據以Json 的形式出現：

    [{"PubId":"1","Title":"Punjab Kesari","Place":"1"}]

代碼： 

 //But it is not fetching data $(function() { $("#pub").autocomplete({ source: function(request, response) { $.ajax({ url: "https://myimpact.in/deletearticle/services/publication.php", type: "GET", data: request, dataType: "JSON", minLength: 2, success: function(data) { response($.map(data, function(el) { return { label: el.Title, value: el.PubId }; })); } }); }, select: function(event, ui) { this.value = ui.item.label; event.preventDefault(); } }); });
 <:DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https.//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min:js"></script> <script src="https.//code.jquery.com/ui/1.12.1/jquery-ui.min:js"></script> <link href="https.//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> </head> <body> <div class="input-group"> <label class="label"> Publication </label> <input class="input--style-4" type="text" id="pub" name="publication"> <div id="pub"> </div> </div> </body> </html>

從 API 獲取數據並記錄它時出現此錯誤“SyntaxError: Unexpected token '<',”<div id="text_translate"><p> 從 API 獲取數據並記錄它時出現此錯誤“SyntaxError: Unexpected token '<', "<.DOCTYPE "... is not valid JSON at App:js:24:1"</p><p> <strong>應用程序.js</strong></p><pre> import { useState } from "react"; import "./App.css"; import CurrentWeather from "./component/current-weather/current-weather"; import { WEATHER_API_KEY, WEATHER_API_URL } from "./component/search/api"; import Search from "./component/search/search"; function App() { const [currentWeather, setCurrentWeather] = useState(null); const [forecast, setForecast] = useState(null); const handleOnSearchChange = (searchData) => { const [lat, lon] = searchData.value.split(" "); const currentWeatherFetch = fetch( `${WEATHER_API_URL}/weather?lat=${lat}&lon=${lon}&appid=${WEATHER_API_KEY}` ); const forecastFetch = fetch( `${WEATHER_API_URL}/forecast?lat=${lat}&lon={${lon}&appid=${WEATHER_API_KEY}` ); Promise.all([currentWeatherFetch, forecastFetch]).then(async (response) => { const weatherResponse = await response[0].json(); const forcastResponse = await response[1].json(); setCurrentWeather({ city: searchData.label, ...weatherResponse, }); setForecast({ city: searchData.label, ...forcastResponse }); }).catch(console.log); }; console.log(currentWeather); console.log(forecast); return ( <div className="container"> <Search onSearchChange={handleOnSearchChange} /> <CurrentWeather /> </div> ); } export default App;</pre><p> <strong>api.js</strong></p><pre> export const geoApiOptions = { method: "GET", headers: { "X-RapidAPI-Key": process.env.REACT_APP_GEODB_API_KEY, "X-RapidAPI-Host": "wft-geo-db.p.rapidapi.com", }, }; export const GEO_API_URL = "https://wft-geo-db.p.rapidapi.com/v1/geo"; export const WEATHER_API_URL = "api.openweathermap.org/data/2.5"; export const WEATHER_API_KEY = process.env.REACT_APP_WEATHER_API_KEY;</pre><p> 我在瀏覽器中手動給出了 api 鏈接並得到了這個結果https://api.openweathermap.org/data/2.5/weather?lat=-27.47&lon=153.12&appid=<API_KEY></p><pre> {"coord":{"lon":153.12,"lat":-27.47},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04n"}],"base":"stations","main":{"temp":296.36,"feels_like":296.75,"temp_min":295.22,"temp_max":297.15,"pressure":1016,"humidity":77},"visibility":10000,"wind":{"speed":3.6,"deg":120},"clouds":{"all":75},"dt":1673616299,"sys":{"type":1,"id":9485,"country":"AU","sunrise":1673550242,"sunset":1673599638},"timezone":36000,"id":2176264,"name":"Belmont","cod":200}</pre><p> 在獲得響應而不是響應時出現錯誤。 不確定我在這里做錯了什么。</p><p> 在獲得響應而不是響應時出現錯誤。</p><p> 從評論中得到了如何獲得整個回復的建議，這是我得到的，</p><pre> <.DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="/favicon,ico" /> <meta name="viewport" content="width=device-width. initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="/logo192.png" /> <.-- manifest:json provides metadata used when your web app is installed on a user's mobile device or desktop. See https.//developers.google.com/web/fundamentals/web-app-manifest/ --> <link rel="manifest" href="/manifest.json" /> <.-- Notice the use of in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML, Unlike "/favicon.ico" or "favicon.ico". "/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <title>React App</title> <script defer src="/static/js/bundle,js"></script></head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <,-- This HTML file is a template, If you open it directly in the browser. you will see an empty page. You can add webfonts, meta tags. or analytics to this file, The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> </body> </html></pre><p> 沒有任何相關的錯誤</p></div>

[英]While fetching data from API and logging it getting this error "SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON at App.js:24:1"

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 自動完成從API獲取數據 從 API 獲取數據並記錄它時出現此錯誤“SyntaxError: Unexpected token '<',”<div id="text_translate"><p> 從 API 獲取數據並記錄它時出現此錯誤“SyntaxError: Unexpected token '<', "<.DOCTYPE "... is not valid JSON at App:js:24:1"</p><p> <strong>應用程序.js</strong></p><pre> import { useState } from "react"; import "./App.css"; import CurrentWeather from "./component/current-weather/current-weather"; import { WEATHER_API_KEY, WEATHER_API_URL } from "./component/search/api"; import Search from "./component/search/search"; function App() { const [currentWeather, setCurrentWeather] = useState(null); const [forecast, setForecast] = useState(null); const handleOnSearchChange = (searchData) => { const [lat, lon] = searchData.value.split(" "); const currentWeatherFetch = fetch( `${WEATHER_API_URL}/weather?lat=${lat}&lon=${lon}&appid=${WEATHER_API_KEY}` ); const forecastFetch = fetch( `${WEATHER_API_URL}/forecast?lat=${lat}&lon={${lon}&appid=${WEATHER_API_KEY}` ); Promise.all([currentWeatherFetch, forecastFetch]).then(async (response) => { const weatherResponse = await response[0].json(); const forcastResponse = await response[1].json(); setCurrentWeather({ city: searchData.label, ...weatherResponse, }); setForecast({ city: searchData.label, ...forcastResponse }); }).catch(console.log); }; console.log(currentWeather); console.log(forecast); return ( <div className="container"> <Search onSearchChange={handleOnSearchChange} /> <CurrentWeather /> </div> ); } export default App;</pre><p> <strong>api.js</strong></p><pre> export const geoApiOptions = { method: "GET", headers: { "X-RapidAPI-Key": process.env.REACT_APP_GEODB_API_KEY, "X-RapidAPI-Host": "wft-geo-db.p.rapidapi.com", }, }; export const GEO_API_URL = "https://wft-geo-db.p.rapidapi.com/v1/geo"; export const WEATHER_API_URL = "api.openweathermap.org/data/2.5"; export const WEATHER_API_KEY = process.env.REACT_APP_WEATHER_API_KEY;</pre><p> 我在瀏覽器中手動給出了 api 鏈接並得到了這個結果https://api.openweathermap.org/data/2.5/weather?lat=-27.47&lon=153.12&appid=<API_KEY></p><pre> {"coord":{"lon":153.12,"lat":-27.47},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04n"}],"base":"stations","main":{"temp":296.36,"feels_like":296.75,"temp_min":295.22,"temp_max":297.15,"pressure":1016,"humidity":77},"visibility":10000,"wind":{"speed":3.6,"deg":120},"clouds":{"all":75},"dt":1673616299,"sys":{"type":1,"id":9485,"country":"AU","sunrise":1673550242,"sunset":1673599638},"timezone":36000,"id":2176264,"name":"Belmont","cod":200}</pre><p> 在獲得響應而不是響應時出現錯誤。 不確定我在這里做錯了什么。</p><p> 在獲得響應而不是響應時出現錯誤。</p><p> 從評論中得到了如何獲得整個回復的建議，這是我得到的，</p><pre> <.DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="/favicon,ico" /> <meta name="viewport" content="width=device-width. initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="/logo192.png" /> <.-- manifest:json provides metadata used when your web app is installed on a user's mobile device or desktop. See https.//developers.google.com/web/fundamentals/web-app-manifest/ --> <link rel="manifest" href="/manifest.json" /> <.-- Notice the use of in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML, Unlike "/favicon.ico" or "favicon.ico". "/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <title>React App</title> <script defer src="/static/js/bundle,js"></script></head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <,-- This HTML file is a template, If you open it directly in the browser. you will see an empty page. You can add webfonts, meta tags. or analytics to this file, The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> </body> </html></pre><p> 沒有任何相關的錯誤</p></div> 從 api 獲取數據未顯示 我收到 TypeError: this.props.function is not a function while from an api 從 Angular 中的 API 獲取數據時出現問題 Backbone js：在使用集合中的rest api獲取數據時，不從模型獲取數據 在 VueJS 2 中處理 Google 地圖 API 中的自動完成位置數據時出現 JavaScript 錯誤 從 API 獲取結果時出現“您需要啟用 Javascript 來運行此”錯誤 從后端獲取數據時出錯 reactjs中從API取數據出錯
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM