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

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

新規登録して質問してみよう
ただいま回答率
87.20%
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アプリケーションを実現することができます。

解決済

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

narimi
narimi

総合スコア16

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アプリケーションを実現することができます。

1回答

0評価

0クリップ

706閲覧

投稿2021/10/06 02:30

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

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

該当のソースコード

HTML

//base.html {% load static %} <!doctype HTML> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <html> <head> <link rel="stylesheet" href="{% static 'main.css' %}"> </head> <body> {% include "_navbar.html" %} {% block main %} コンテンツがありません {% endblock %} <p>数値 <span id="span1"></span></p> <form> <input type="number" id="number1" value="1"> <input type="button" value="送信" onclick="clickBtn1()"/> </form> <hr> <button type="button" onclick="clickBtn2()">判定</button><br> <script> var stockdata = [] var element_data = [] var row  //正常に動かない方        function clickBtn1() { const number1 = document.getElementById("number1"); console.log(number1.value); document.getElementById("span1").textContent = number1.value; var txt = document.getElementById("number1").value; console.log(txt); $.ajax({ url: "{% url 'website:call_write_data' %}", method: 'GET', data: {"input_data": txt}, dataType: "number", contentType: "application/json", beforeSend: function(xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrf_token); } }, error: function(xhr, status, error) { //通信が成功しないため、こちらが呼び出されてしまう。 console.log("error") } }) .done(function(data) { console.log("Success"); }); // csrf_tokenの取得に使う function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie !== '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) === (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } // ヘッダにcsrf_tokenを付与する関数 function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); }; } //正常に動く方       function clickBtn2() { $.ajax({ url: "{% url 'website:call_sample' %}", method: 'GET', data: { param1: 'loading', }, dataType: "text", beforeSend: function(xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrf_token); } }, error: function(xhr, status, error) { console.log("errorが出てます") } }) .done(function(data) { console.log(data); row = data; console.log(row); console.log("Successです"); for(let i = 0; i<row.length; i++){ if(row[i] == 'b') { element_data.push('b'); }else if(row[i] == 'r'){ element_data.push('r'); }else if(row[i] == 'h'){ element_data.push('h'); }else if(row[i] == ']'){ console.log(element_data); stockdata.push(element_data); element_data = []; } } console.log(stockdata); makeTable(stockdata,"table"); }); function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie !== '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); if (cookie.substring(0, name.length + 1) === (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } // ヘッダにcsrf_tokenを付与する関数 function csrfSafeMethod(method) { return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); }; // 表の動的作成 function makeTable(data, tableId){ // 表の作成開始 var rows=[]; var table = document.createElement("table"); // 表に2次元配列の要素を格納 for(i = 0; i < data.length; i++){ rows.push(table.insertRow(-1)); // 行の追加 for(j = 0; j < data[0].length; j++){ cell=rows[i].insertCell(-1); if(data[i][j]== 'h'){ cell.innerHTML = "home"; }else if(data[i][j]=='r'){ cell.innerHTML = "road"; }else if(data[i][j]== 'b'){ cell.innerHTML = " "; }else { cell.appendChild(document.createTextNode(data[i][j])); } // 背景色の設定 if(i==-1){ cell.style.backgroundColor = "#bbb"; // ヘッダ行 }else{ cell.style.backgroundColor = "#ddd"; // ヘッダ行以外 } cell.style.width = String(50)+"px"; cell.style.height = String(50)+"px"; } } // 指定したdiv要素に表を加える document.getElementById(tableId).appendChild(table); } } </script> <br> <div id="table"></div> {% include "_footer.html" %} </body> </html>

python

#views.py from django.views.generic import TemplateView from django.shortcuts import render from django.http import HttpResponse from .application import sample from .application import write_data import logging logger = logging.getLogger('development') class IndexView(TemplateView): template_name ="index.html" def get_context_data(self): ctxt = super().get_context_data() ctxt["username"] = "Narimi" return ctxt class AboutView(TemplateView): template_name ="about.html" def get_context_data(self): ctxt = super().get_context_data() ctxt["num_services"] = 12345678 ctxt["skills"] = [ "Python", "HTML", "Javascript", "Java", ] return ctxt def call_sample(req): if req.method == 'GET': sample.write_sistem(req.GET.get("input_data")) data = sample.write_sistem(req) return HttpResponse(data) def call_write_data(req): print(input_data) if req.method == 'GET': # write_data.pyのwrite_csv()メソッドを呼び出す。 # ajaxで送信したデータのうち"input_data"を指定して取得する。 write_data.write_csv(req.GET.get("input_data")) return HttpResponse()

python

#urls.py from django.urls import path from . import views from .views import IndexView, AboutView app_name = 'website' urlpatterns = [ path('', IndexView.as_view()), path('about/', AboutView.as_view()), path("ajax/", views.call_sample, name="call_sample"), #ここの書き方がわからない path("ajax/", views.call_write_data, name="call_write_data"), ]

試したこと

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

補足情報

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

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

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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に関して通信は成功していない、というのが結論です。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

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アプリケーションを実現することができます。