質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.81%

  • JavaScript

    14340questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6013questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Python

    5987questions

    Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

  • Flask

    138questions

    FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Ajaxでjsonデータを渡したい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 130

k0908

score 27

Ajaxでjsonデータを渡したい。

var users = {{ users|tojson }};
 $(function(){
  $.ajax({
  type: 'POST',
  dataType: 'json',
  url: 'http://localhost:8000/app’,
  data: users,
  }).done(function(response) {
    console.log(response);
    console.log(users);
    for (i = 0; i < users.length; i++) {
          console.log(“HERE”);
          A(users[i]);
    }
  }).fail(function(xhr,err){
    console.log(xhr.status);
  });
});

とコードを書いて、users変数のjsonをAメソッドに渡したいが、できない。
console.log(users);で何も出力されていなく、console.log(“HERE”);も呼ばれていなかった。
console.log(response);は200番が返ってきているため、通信に問題はない。
Usersの渡し方に問題があるのか?どう直せば良いのか?

localhost:8000/app側は

@app.route("/app", methods=["GET","POST"])
def app(user):
    #データを辞書型でとってくる
    users= get_data(user)

    return render_template("index.html", users=users)


とpython・flaskを使い値を渡しています。
usersでは

[[100,200],[250,300],[150,240],[600,800]]


と二次元配列を得ている。

    $(function(){

        $.ajax({
            type : 'post',
            url : 'http://localhost:8000/app’,
            data : JSON.stringify(users),
            contentType: 'application/JSON',
            dataType : 'JSON',
            scriptCharset: 'utf-8',
            success : function(data) {

                var data = response;
                for (i = 0; i < data.length; i++) {
                A(data[i]);
                }
            },
            error : function(data) {

                // Error
                alert("error");

            }
        });
})


と書いたところerrorとアラートが出た。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • k0908

    2018/05/17 12:34

    おそらくそれは必要ないかと思います。usersのデータはjs側で取得できていて、http://localhost:8000/app 側ではGET・POSTが両方受け入れられるようになっているからです

    キャンセル

  • mts10806

    2018/05/17 12:37

    必要ですよ。ajaxでhttp://localhost:8000/appがusersデータを受け取って何かしらの処理をした結果がresponseに入ってくるので。正しく取得して、意図した情報を返しているかはhttp://localhost:8000/appに書いてあるからです。

    キャンセル

  • k0908

    2018/05/17 13:15

    情報を追加いたしました。もしお分かりでしたらお願いいたします

    キャンセル

回答 2

+2

まず

var users = {{ users|tojson }};

が怪しいです。
そしてajaxで呼び出したあとにdoneのコールバック内で
もってきたresponseではなくusersでforを回している意味もわかりません
そもそもusersが配列ではないのでは?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/17 13:17

    usersが配列ではないかはどのように確かめられますか?console.log(toString.call(users)); と出力すると[object Array]と出ました。初心者質問なのですがこれは配列という意味ですよね?

    キャンセル

checkベストアンサー

+1

変数 users をゴニョゴニョするのは一旦おいておくとして、 POST リクエストが正常に出来ているかを確かめたほうがよいのでは?
手っ取り早く ajax したいのであれば jQuery ajax ではなく、ブラウザ標準の Fetch API 使うことをおすすめします。
以下のコードは、data オブジェクトを JSON として POSTリクエストします。

こちらで動作確認できます。 https://codepen.io/og24715/pen/RyeqOv?editors=0010

const url = 'https://httpbin.org/post';
const data = {
  a: 1,
  b: 2,
};

fetch(url, {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data),
})
.then(response => response.json())
.then(json => {
  console.log(json);
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/17 13:30

    ありがとうございます。最終的にはusersのjsonをAメソッドに渡したいのですが、そのAメソッドに渡すコードをご提示のコードに書き加えるなら、どのように追加すればいいでしょうか?

    キャンセル

  • 2018/05/17 13:41 編集

    ご提示のコードだと変数 users はPOSTリクエストの本文に見えるんですが間違いないですか。
    であれば ajax 関係ないのでお好きな場所で A(users) とすればよいのでは。

    キャンセル

  • 2018/05/17 13:51

    .then(json => {
    console.log(json);
    A(users);
    });
    としても動かず、fetch(url, { の外で A(users);と書いても動きませんでした。。。

    キャンセル

  • 2018/05/17 14:04 編集

    質問のタイトルを変更されたほうがよいとおもいます。
    json を post するのは上のコードで間違いなく出来ているはずです。
    あなたが何をしたいのか、 変数 users の出処がどこなのか、まるで分かりません。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.81%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    ajax 特定のdataの扱い方

    前提 プロフィールページを作成しています。 実現したいこと 保存ボタンを押した後にajaxにて変更後のデータをサーバー送りたいです。 試したこと 下記コードに

  • 解決済

    配列の値が取得できない

    前提・実現したいこと ajaxを使って取得したJSON形式のデータから 値を取得したいのですが、うまくいきません。 発生している問題・エラーメッセージ きちんととれてい

  • 受付中

    Superagentでajax処理

    現在Reactでアプリケーションを作っています。 これまでjQueryを使っていたので、ajaxにてデータを送っていたのですが、 Reactになったため、Superagentを

  • 解決済

    Javascriptでの非同期PDFファイル表示

    実現したいこと Javascriptで非同期処理にてPDFファイルをサーバ側で作成し、そのファイルをダウンロードまたはブラウザで直接開きたい。 発生している問題 作成した

  • 解決済

    jQuery UI autocompleteでajax通信を途中で中断する方法

    inputタグに入力した内容から候補表示を行うautocompleteを使っているのですが、inputタグ内に一度文字を入力した後に、候補表示される前に(success前に)文字列

  • 解決済

    HTMLにJSONデータを埋め込みたい

    HTMLにJSONデータを埋め込みたいです。 PythonとDjangoとHTMLとJSでWEBサイトを作っています。{{ form }}のドリルダウンをいじると背景・h1・pの色

  • 解決済

    RailsのViewからJavascriptでnestされたidを取得して、Postする方法

    前提・実現したいこと indexのページにTableがあり、そこにずらっとデータがリストされています。 右端にCheckBoxを用意し、そこのCheckBoxにCheckを入れると

  • 解決済

    reactJSのajax通信の仕様について

    reactJSでajax通信を使った処理を作成しています。 ajaxの返り値を見ると、2回実行されているのですが、 これは仕様でしょうか? 調べても有益な情報が得られず… 教えてい

同じタグがついた質問を見る

  • JavaScript

    14340questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6013questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Python

    5987questions

    Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

  • Flask

    138questions

    FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。