Q&A
前提
DjangoでAjaxを用いて非同期通信を行いたいです。
実現したいこと
formで入力した値を取得し、DB内のpkと紐づけてのweb出力をAJaxを用いて
非同期通信を行いたいです。
プログラムを始めたばかりで、至らないところが多いですがアドバイスいただけると嬉しいです。
発生している問題・エラーメッセージ
ValueError: Field 'id' expected a number but got ''. formに入力した値を変数"id"として取得し、DBに紐づける段階でエラーとなってしまいます。
該当のソースコード
views.py
1def form(request): 2 id = request.POST.get('id') 3 # フォームで入力された値をPOSTメソッドで入手 4 user_obj = User.objects.get(pk=id) 5 # フォームで入手した値をpkとして、DBの情報を入手 6 context = { 7 'user': user_obj, 8 'form': str(ConnectForm()), 9 } 10 return JsonResponse(context)
試したこと
Ajaxを使わずに、ページ遷移での出力は上記と同様なコードで
DBと紐づけることは出来ました。
しかしAjaxを用いると、エラーが発生してしまい解決方法がわからない状況です。
補足情報(FW/ツールのバージョンなど)
views.py
1from django.shortcuts import render 2from django.conf import settings 3from django.http import JsonResponse 4from .forms import ConnectForm 5from connectapp.models import User 6 7 8def index(request): 9 my_dict = { 10 'form': ConnectForm(), 11 } 12 # htmlでformを表示するために、my_dictに格納して受け渡し 13 return render(request,'connectapp/start.html',my_dict) 14 15def form(request): 16 id = request.POST.get('id') 17 # フォームで入力された値をPOSTメソッドで入手 18 user_obj = User.objects.get(pk=id) 19 # フォームで入手した値をpkとして、DBの情報を入手 20 context = { 21 'user': user_obj, 22 'form': str(ConnectForm()), 23 } 24 return JsonResponse(context)
start.html
1<!doctype html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>テストWebアプリ</title> 6 </head> 7 <body> 8 <form id = "form_1" action="{% url 'connectapp:form' %}" method="post"> 9 {% csrf_token %} 10 {{ form }} 11 <input type="submit" value="送信"> 12 </form> 13 14 <h1>出力結果</h2> 15 <div class="result"> 16 </div> 17 <!-- <h1> 名前: {{ user.name | linebreaks }} </h1> 18 <h1> 歳: {{ user.age | linebreaks }} </h1> 19 <h1> 懸賞金: {{ user.bounty | linebreaks }} </h1> --> 20<!-- {% block page_content %}{% endblock %} --> 21 </body> 22</html>
Ajax
1<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 2 <script> 3 function getCookie(name) { 4 var cookieValue = null; 5 if (document.cookie && document.cookie !== '') { 6 var cookies = document.cookie.split(';'); 7 for (var i = 0; i < cookies.length; i++) { 8 var cookie = jQuery.trim(cookies[i]); 9 // Does this cookie string begin with the name we want? 10 if (cookie.substring(0, name.length + 1) === (name + '=')) { 11 cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 12 break; 13 } 14 } 15 } 16 return cookieValue; 17 } 18 19 var csrftoken = getCookie('csrftoken'); 20 21 function csrfSafeMethod(method) { 22 // these HTTP methods do not require CSRF protection 23 return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 24 } 25 26 $.ajaxSetup({ 27 beforeSend: function (xhr, settings) { 28 if (!csrfSafeMethod(settings.type) && !this.crossDomain) { 29 xhr.setRequestHeader("X-CSRFToken", csrftoken); 30 } 31 } 32 }); 33 $('#form_1').submit(function(e) { 34 e.preventDefault(); 35 36 $.ajax({ 37 'url': "{% url 'connectapp:form' %}", 38 'type': 'POST', 39 'data': { 40 'id': $('#form_1').val(), 41 }, 42 'dataType': 'json' 43 }) 44 .done(function(response){ 45 $('.result').prepend('<p>名前:'+ response.user.name + '</p>'); 46 $('.result').prepend('<p>歳:'+ response.user.age + '</p>'); 47 $('.result').prepend('<p>懸賞金:'+ response.user.bounty + '</p>'); 48 $('.form').prepend(response.form); 49 }); 50 }); 51</script>
urls.py
1from django.urls import path 2from . import views 3 4app_name = "connectapp" 5 6urlpatterns = [ 7 path('', views.index, name='index'), 8 path('form',views.form, name='form')
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。