質問の意図がよくわからないのですが
clickBtn1は正常にapiを呼び出せるが、clickBtn2は呼び出せないということでしょうか？
その場合urlが404エラーなのか、200だけど正常に動かないのかで考え方は変わるでしょう
###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の部分が問題であるということはわかっているが、書き方がわからない。
勝手に変更してもうまくいかなかったので、変更する部分がそもそも間違っているのかと
補足情報
情報として足りない部分はコメントで教えていただけると助かります。
他のファイルに関しても、基本的にはデフォルトに沿って大きく変更しているものはないと思われます。
まだまだ初心者なので、どういう形、情報を載せていると答えやすいなどの指摘もしていただければと思います。
わかりにくい書き方になってしまい申し訳ありません。
ボタン2に関しては正常に働いており、想定したpythonファイルの実行、HTMLへのレスポンスが確立されているという状況です。
問題はあとから作成したボタン1の方で、受け取った値をajaxで送信した後（おそらく）urls.pyでのpathの書き方がおかしいために本来ボタン２で実行したファイルが実行されてしまうという形になっていあmす。
Web上のコンソールではデバッグ用の'error'が表示されており、開発側のcmdではボタン２で想定しているpythonファイルの結果が表示されます。
urlは２００で正常に動作していますが、ボタン１に関して通信は成功していない、というのが結論です。
まだ回答がついていません
会員登録して回答してみよう
