Ajaxでjsonデータを渡したい

Question

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);は２００番が返ってきているため、通信に問題はない。
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とアラートが出た。

Comments

[m.ts10806]

前の質問、解決していないのに解決済みにしてしまてませんか？　https://teratail.com/questions/126556

[k0908]

質問が別かと思ったので別に投稿しました！

[kei344]

http://localhost:8000/app 側の実装も提示されてはいかがでしょうか。

[m.ts10806]

前の質問から一歩も進んでいない印象のための指摘です。

[k0908]

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

[m.ts10806]

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

[k0908]

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

Answer 1

まず

var users = {{ users|tojson }};

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

Comments

[k0908]

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

Answer 2

変数 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);
});

Comments

[k0908]

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

[og24715]

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

[k0908]

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

[og24715]

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