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

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

新規登録して質問してみよう
ただいま回答率
85.45%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Python

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

2503閲覧

ajax通信でpythonファイルを実行する際のpathのつなぎ方を知りたい

narimi

総合スコア18

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Python

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2021/10/06 02:30

###ajaxで複数のpathをつなぎたい
djangoを利用したWebアプリの開発を行っています。
HTML上で数値を受け取り、Javascript、ajax通信でpythonファイルに数値を送信させるという流れを想定しています。

具体的な問題としては、既に存在するボタンと今回新たに追加したボタンによるajax通信のpathがかぶってしまっているために想定したpythonファイルではないものが呼び出されてしまうというものです。
どのように記述すればそれを回避できるのか、調べてもわからなかったため、質問させていただきます。

該当のソースコード

HTML

1//base.html 2{% load static %} 3<!doctype HTML> 4<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 5<html> 6 <head> 7 <link rel="stylesheet" href="{% static 'main.css' %}"> 8 </head> 9 <body> 10 {% include "_navbar.html" %} 11 {% block main %} 12 コンテンツがありません 13 {% endblock %} 14 <p>数値 <span id="span1"></span></p> 15 <form> 16 <input type="number" id="number1" value="1"> 17 <input type="button" value="送信" onclick="clickBtn1()"/> 18 </form> 19 20 <hr> 21 22 <button type="button" onclick="clickBtn2()">判定</button><br> 23 24 <script> 25 26 var stockdata = [] 27 var element_data = [] 28 var row 29 30  //正常に動かない方 31       function clickBtn1() { 32 const number1 = document.getElementById("number1"); 33 console.log(number1.value); 34 document.getElementById("span1").textContent = number1.value; 35 36 var txt = document.getElementById("number1").value; 37 console.log(txt); 38 39 $.ajax({ 40 url: "{% url 'website:call_write_data' %}", 41 method: 'GET', 42 data: {"input_data": txt}, 43 dataType: "number", 44 contentType: "application/json", 45 beforeSend: function(xhr, settings) { 46 if (!csrfSafeMethod(settings.type) && !this.crossDomain) { 47 xhr.setRequestHeader("X-CSRFToken", csrf_token); 48 } 49 }, 50 error: function(xhr, status, error) { 51 //通信が成功しないため、こちらが呼び出されてしまう。 52 console.log("error") 53 } 54 }) 55 .done(function(data) { 56 console.log("Success"); 57 }); 58 59 // csrf_tokenの取得に使う 60 function getCookie(name) { 61 var cookieValue = null; 62 if (document.cookie && document.cookie !== '') { 63 var cookies = document.cookie.split(';'); 64 for (var i = 0; i < cookies.length; i++) { 65 var cookie = jQuery.trim(cookies[i]); 66 // Does this cookie string begin with the name we want? 67 if (cookie.substring(0, name.length + 1) === (name + '=')) { 68 cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 69 break; 70 } 71 } 72 } 73 return cookieValue; 74 } 75 76 // ヘッダにcsrf_tokenを付与する関数 77 function csrfSafeMethod(method) { 78 // these HTTP methods do not require CSRF protection 79 return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 80 }; 81 } 82 83 //正常に動く方 84      function clickBtn2() { 85 86 $.ajax({ 87 url: "{% url 'website:call_sample' %}", 88 method: 'GET', 89 data: { 90 param1: 'loading', 91 }, 92 dataType: "text", 93 beforeSend: function(xhr, settings) { 94 if (!csrfSafeMethod(settings.type) && !this.crossDomain) { 95 xhr.setRequestHeader("X-CSRFToken", csrf_token); 96 } 97 }, 98 error: function(xhr, status, error) { 99 console.log("errorが出てます") 100 } 101 }) 102 .done(function(data) { 103 console.log(data); 104 row = data; 105 console.log(row); 106 console.log("Successです"); 107 for(let i = 0; i<row.length; i++){ 108 if(row[i] == 'b') { 109 element_data.push('b'); 110 }else if(row[i] == 'r'){ 111 element_data.push('r'); 112 }else if(row[i] == 'h'){ 113 element_data.push('h'); 114 }else if(row[i] == ']'){ 115 console.log(element_data); 116 stockdata.push(element_data); 117 element_data = []; 118 } 119 } 120 console.log(stockdata); 121 makeTable(stockdata,"table"); 122 }); 123 124 function getCookie(name) { 125 var cookieValue = null; 126 if (document.cookie && document.cookie !== '') { 127 var cookies = document.cookie.split(';'); 128 for (var i = 0; i < cookies.length; i++) { 129 var cookie = jQuery.trim(cookies[i]); 130 if (cookie.substring(0, name.length + 1) === (name + '=')) { 131 cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 132 break; 133 } 134 } 135 } 136 return cookieValue; 137 } 138 139 // ヘッダにcsrf_tokenを付与する関数 140 function csrfSafeMethod(method) { 141 return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 142 }; 143 144 145 // 表の動的作成 146 function makeTable(data, tableId){ 147 // 表の作成開始 148 var rows=[]; 149 var table = document.createElement("table"); 150 151 // 表に2次元配列の要素を格納 152 for(i = 0; i < data.length; i++){ 153 rows.push(table.insertRow(-1)); // 行の追加 154 for(j = 0; j < data[0].length; j++){ 155 cell=rows[i].insertCell(-1); 156 if(data[i][j]== 'h'){ 157 cell.innerHTML = "home"; 158 }else if(data[i][j]=='r'){ 159 cell.innerHTML = "road"; 160 }else if(data[i][j]== 'b'){ 161 cell.innerHTML = " "; 162 }else { 163 cell.appendChild(document.createTextNode(data[i][j])); 164 } 165 // 背景色の設定 166 if(i==-1){ 167 cell.style.backgroundColor = "#bbb"; // ヘッダ行 168 }else{ 169 cell.style.backgroundColor = "#ddd"; // ヘッダ行以外 170 } 171 cell.style.width = String(50)+"px"; 172 cell.style.height = String(50)+"px"; 173 } 174 } 175 // 指定したdiv要素に表を加える 176 document.getElementById(tableId).appendChild(table); 177 } 178 } 179 </script> 180 181 <br> 182 <div id="table"></div> 183 184 {% include "_footer.html" %} 185 </body> 186</html>

python

1#views.py 2from django.views.generic import TemplateView 3from django.shortcuts import render 4from django.http import HttpResponse 5from .application import sample 6from .application import write_data 7import logging 8 9logger = logging.getLogger('development') 10 11class IndexView(TemplateView): 12 template_name ="index.html" 13 14 def get_context_data(self): 15 ctxt = super().get_context_data() 16 ctxt["username"] = "Narimi" 17 return ctxt 18 19class AboutView(TemplateView): 20 template_name ="about.html" 21 22 def get_context_data(self): 23 ctxt = super().get_context_data() 24 ctxt["num_services"] = 12345678 25 ctxt["skills"] = [ 26 "Python", 27 "HTML", 28 "Javascript", 29 "Java", 30 ] 31 return ctxt 32 33def call_sample(req): 34 if req.method == 'GET': 35 sample.write_sistem(req.GET.get("input_data")) 36 data = sample.write_sistem(req) 37 return HttpResponse(data) 38 39def call_write_data(req): 40 print(input_data) 41 if req.method == 'GET': 42 # write_data.pyのwrite_csv()メソッドを呼び出す。 43 # ajaxで送信したデータのうち"input_data"を指定して取得する。 44 write_data.write_csv(req.GET.get("input_data")) 45 return HttpResponse()

python

1#urls.py 2from django.urls import path 3from . import views 4 5from .views import IndexView, AboutView 6 7app_name = 'website' 8urlpatterns = [ 9 path('', IndexView.as_view()), 10 path('about/', AboutView.as_view()), 11 path("ajax/", views.call_sample, name="call_sample"), 12 #ここの書き方がわからない 13 path("ajax/", views.call_write_data, name="call_write_data"), 14] 15

試したこと

urls.pyのpathの部分が問題であるということはわかっているが、書き方がわからない。
勝手に変更してもうまくいかなかったので、変更する部分がそもそも間違っているのかと

補足情報

情報として足りない部分はコメントで教えていただけると助かります。
他のファイルに関しても、基本的にはデフォルトに沿って大きく変更しているものはないと思われます。

まだまだ初心者なので、どういう形、情報を載せていると答えやすいなどの指摘もしていただければと思います。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2021/10/06 02:41

質問の意図がよくわからないのですが clickBtn1は正常にapiを呼び出せるが、clickBtn2は呼び出せないということでしょうか? その場合urlが404エラーなのか、200だけど正常に動かないのかで考え方は変わるでしょう
narimi

2021/10/06 02:50

わかりにくい書き方になってしまい申し訳ありません。 ボタン2に関しては正常に働いており、想定したpythonファイルの実行、HTMLへのレスポンスが確立されているという状況です。 問題はあとから作成したボタン1の方で、受け取った値をajaxで送信した後(おそらく)urls.pyでのpathの書き方がおかしいために本来ボタン2で実行したファイルが実行されてしまうという形になっていあmす。 Web上のコンソールではデバッグ用の'error'が表示されており、開発側のcmdではボタン2で想定しているpythonファイルの結果が表示されます。 urlは200で正常に動作していますが、ボタン1に関して通信は成功していない、というのが結論です。
guest

回答1

0

自己解決

適当にpathの名前を変えたらおそらくうまくいきました。
解決に協力していただいた皆さん、ありがとうございました。

投稿2021/10/06 04:08

narimi

総合スコア18

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問