「jQuery.ajax#get 後に予期しないトークン コロン JSON が発生しました」エラーを解決するにはどうすればよいですか?

「jQuery.ajax#get 後の予期しないトークン コロン JSON」: 総合ガイド

はじめに

この問題は、jQuery を使用して AJAX リクエストを作成しようとし、リクエストの構成と互換性のない形式で JSON を返すサーバーからデータを受信したときに発生します。これはイライラするかもしれませんが、根本原因を理解し、適切な解決策を適用すると解決できます。

根本原因

エラー「jQuery の後に予期しないトークン コロン JSON が存在します。 ajax#get」は、サーバーが適切なパディングまたはコールバック クエリ文字列パラメータなしで JSON データを返した場合に発生します。 JSONP (JSON with Padding) は、クロスオリジンリクエストを行うときに使用される手法で、サーバーはブラウザーのセキュリティ制限を回避するために JSON データを関数呼び出しにラップします。ただし、サーバーがパディング パラメータまたはコールバック パラメータを含めることに失敗した場合、ブラウザは応答を無効な JSON として解釈します。

解決策

この問題を解決するには、次のようにします。サーバーが JSONP 応答を正しく生成することを確認する必要があります。これは、JSON データを関数呼び出し内にラップし、クエリ文字列にコールバック パラメーターが確実に含まれるようにすることを意味します。

Node.js Express の場合

Node.js の場合Express では、res.jsonp() メソッドを使用して JSONP 応答を生成できます:

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

または、パディングとコールバック パラメーターを手動で追加できます:

const callback = req.query.callback;
const data = JSON.stringify({
  Name: 'Tom',
  Description: 'Hello it's me!'
});

if (callback) {
  res.setHeader('Content-Type', 'text/javascript');
  res.end(`${callback}(${data})`);
} else {
  res.setHeader('Content-Type', 'application/json');
  res.end(data);
}

jQuery

クライアント側では、dataType: 'jsonp' オプションを指定することで、JSONP を使用するように AJAX リクエストを構成できます:

$.ajax({
  url: findUrl,
  type: 'get',
  dataType: 'jsonp',
  success: (data) => {
    // ...
  },
  error: (jqXHR, textStatus, errorThrown) => {
    // ...
  }
});

結論

サーバーが JSONP 応答を正しく生成し、クライアントがその AJAX リクエストを適切に構成していることを確認することで、「jQuery.ajax#get 後に予期しないトークン コロン JSON が発生しました」エラーを回避し、サーバーから JSON データを正常に取得できます。 .

以上が「jQuery.ajax#get 後に予期しないトークン コロン JSON が発生しました」エラーを解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。