jQuery.ajax を使用して Node.js から JSON を取得するときに発生する「予期しないトークン :」エラーを解決する方法

jQuery.ajax#get の予期しないトークン コロン JSON

問題:

使用時jQuery.ajax#get で Node.js API から JSON データを取得すると、Chrome で「予期しないトークン :」エラーが発生します。

コンテキスト:

• サーバー側コード: Node.js Express サーバーは、次の形式で JSON データを返します: {"Name":"Tom","Description":"Hello it's me!"}.
• クライアント側コード: AJAX get リクエストが jQuery スクリプトで作成され、JSON データを取得します。

調査:

Chrome でエラーを調べると、JSON 応答に予期しないコロン (:) が含まれていることがわかります。

解決策:

JSONP サポートの有効化:

この問題は、クライアントが JSONP 応答 (JavaScript 関数呼び出しでラップされた JSON データ) を期待しているために発生します。 JSONP サポートを有効にするには、サーバーは応答に「パディング」(「P」) を含める必要があります。

<code class="text">jQuery111108398571682628244_1403193212453({"Name":"Tom","Description":"Hello it's me!"})</code>

サーバー側のコード変更:

Node.js Express で JSONP をサポートするには、サーバー コードを次のように変更します:

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  const callback = req.query.callback;
  const data = {
    Name: "Tom",
    Description: "Hello it's me!"
  };

  if (callback) {
    res.setHeader('Content-Type', 'text/javascript');
    res.end(callback + '(' + JSON.stringify(data) + ')');
  } else {
    res.json(data);
  }
});

または:

ExpressJS の組み込み res.jsonp() メソッドを使用します。

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.jsonp({
    Name: "Tom",
    Description: "Hello it's me!"
  });
});

クライアント側のコード変更:

クライアント側での変更は必要ありません。デフォルトでは、jQuery は関数名を含むコールバック クエリ文字列パラメータを渡します。

以上がjQuery.ajax を使用して Node.js から JSON を取得するときに発生する「予期しないトークン :」エラーを解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。