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とアラートが出た。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+2
まず
var users = {{ users|tojson }};
が怪しいです。
そしてajaxで呼び出したあとにdoneのコールバック内で
もってきたresponseではなくusersでforを回している意味もわかりません
そもそもusersが配列ではないのでは？
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
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);
});投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
質問への追記・修正、ベストアンサー選択の依頼
mts10806
2018/05/17 12:02
前の質問、解決していないのに解決済みにしてしまてませんか？ https://teratail.com/questions/126556
k0908
2018/05/17 12:07
質問が別かと思ったので別に投稿しました！
kei344
2018/05/17 12:12
http://localhost:8000/app 側の実装も提示されてはいかがでしょうか。
mts10806
2018/05/17 12:23
前の質問から一歩も進んでいない印象のための指摘です。
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
情報を追加いたしました。もしお分かりでしたらお願いいたします