Djangoでajaxを使ってpost通信でjsonデータを送信する方法

ajaxを使ってpost通信でjsonデータを送信するプログラムです。
私はdjangoを使っています。

質問が二つあります。
一つ目
urlには、表示するurlを入れればいいのですか？

二つ目jsonを送信する部分はどこになりますか。
$.ajax({
～～～
$("#response").html(JSON.stringify(data));
～～～
)}
ここになりますか？

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>HTMLファイルからPOSTでJSONデータを送信する</title>
6<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
7
8<script type="text/javascript">
9    $(function(){
10        $("#response").html("Response Values");
11
12        $("#button").click( function(){
13            var url = $("#url_post").val();
14
15                var JSONdata = {
16                    value1: $("#value1").val(),
17                    value2: $("#value2").val()      
18                };
19
20            alert(JSON.stringify(JSONdata));
21
22            $.ajax({
23                type : 'post',
24                url : url,
25                data : JSON.stringify(JSONdata),
26                contentType: 'application/JSON',
27                dataType : 'JSON',
28                scriptCharset: 'utf-8',
29                success : function(data) {
30
31                    // Success
32                    alert("success");
33                    alert(JSON.stringify(data));
34                    $("#response").html(JSON.stringify(data));
35                },
36                error : function(data) {
37
38                    // Error
39                    alert("error");
40                    alert(JSON.stringify(data));
41                    $("#response").html(JSON.stringify(data));
42                }
43            });
44        })
45    })
46</script>
47
48</head>
49<body>
50    <h1>HTMLファイルからPOSTでJSONデータを送信する</h1>
51    <p>URL: <input type="text" id="url_post" name="url" size="100" value="http://testurl/"></p>
52    <p>value1: <input type="text" id="value1" size="30" value="値1"></p>
53    <p>value2: <input type="text" id="value2" size="30" value="値2"></p>
54    <p><button id="button" type="button">submit</button></p>
55    <textarea id="response" cols=120 rows=10 disabled></textarea>
56</body>
57</html>

行動規範の内容に同意します

回答1件

ベストアンサー

一つ目

urlには、表示するurlを入れればいいのですか？

No.
非同期通信は「バックグラウンド実行」という位置づけて考えて良いです。
つまり画面表示がありません。
「data を受け取って処理をするプログラム（今回はPython-Djangoでしょうか）が実行できるURL」を入れます。

DjangoにてPythonでajaxしてみる

1点ヒントを言っておくと、受け取り方は通常入力フォームから送信された場合と同じものであるはずです。
ただし返却する際はviewではなく、今回であればjson文字列を返却します。

二つ目jsonを送信する部分はどこになりますか。

1つ目のURLで実行する処理次第ではないでしょうか。ちょっと意味が分かりません。

単に「入力した情報をJSON化したい」のであれば、配列かオブジェクトに格納してJSON.parse()すればいいだけですし。前の質問から軽く見た感じでは迷走しているようにも見えます。
JSONファイルを作りたいのであればその実行先URLでJSONファイルを作って終わりです。

投稿2018/12/28 07:00

m.ts10806

総合スコア80850

退会済みユーザー

2018/12/28 08:02

今下のサイトを参考にして、やっています。 https://qiita.com/juniskw/items/7fa72f91e3dc899a80ae 1のurlで指定することは出来たのですが、urlが変わりページが遷移してします。 2についてはまだ置いておくことにしています。 1についてですが、 views.pyにfor_viewがフォームを表示するページを表示して、for_ajaxがサーバ側に送られてきたデータに'！！！'をつけて返すと認識しています。ここで、しかしfor_ajaxを動かすと元のページが表示されません。どうしたらいいですか？

m.ts10806

2018/12/28 08:06

submit時に実行されるようになっているのでそうでしょうね。 preventDefaultを設定するか、 https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault submitボタンのtypeをbuttonに変更してclick時のイベントに変更してください。というか今のコードから離れてませんか？あちこち参考にするのは良いですが、コードの方向性が散らばるのは解決には向かいませんよ。

退会済みユーザー

2018/12/28 08:24

htmlの<input id="surprise_btn" type="submit"> をbuttonに変更しました。今度はページが遷移しなくなりました。views.pyのfor_ajaxが動いてないと思います。

m.ts10806

2018/12/28 08:30

ajaxは画面遷移させずに処理を行うものです。回答に「バックグラウンドで」と書いてますよ。

退会済みユーザー

2018/12/28 08:36

ページが遷移しなかったのは良かったのですが、for_ajaxでコマンドにHelloと表示するようにしているのですが、表示しなかったのでfor_ajaxが動いていないと思うってことです。

m.ts10806

2018/12/28 08:39

バックグラウンド実行してるのにどうやってコマンド確認できるんですか？ ajaxで指定した先の処理のデバッグするにはその処理でログファイルに書き出して実行後にログファイル確認するくらいしかないですよ。