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

###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の部分が問題であるということはわかっているが、書き方がわからない。
勝手に変更してもうまくいかなかったので、変更する部分がそもそも間違っているのかと

補足情報

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

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

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の書き方がおかしいために本来ボタン２で実行したファイルが実行されてしまうという形になっていあmす。 Web上のコンソールではデバッグ用の'error'が表示されており、開発側のcmdではボタン２で想定しているpythonファイルの結果が表示されます。 urlは２００で正常に動作していますが、ボタン１に関して通信は成功していない、というのが結論です。

回答1件

自己解決