前提
DjangoでAjaxを用いて非同期通信を行いたいです。
実現したいこと
formで入力した値を取得し、DB内のpkと紐づけてのweb出力をAJaxを用いて
非同期通信を行いたいです。
プログラムを始めたばかりで、至らないところが多いですがアドバイスいただけると嬉しいです。
発生している問題・エラーメッセージ
ValueError: Field 'id' expected a number but got ''. formに入力した値を変数"id"として取得し、DBに紐づける段階でエラーとなってしまいます。
該当のソースコード
views.py
def form(request): id = request.POST.get('id') # フォームで入力された値をPOSTメソッドで入手 user_obj = User.objects.get(pk=id) # フォームで入手した値をpkとして、DBの情報を入手 context = { 'user': user_obj, 'form': str(ConnectForm()), } return JsonResponse(context)
試したこと
Ajaxを使わずに、ページ遷移での出力は上記と同様なコードで
DBと紐づけることは出来ました。
しかしAjaxを用いると、エラーが発生してしまい解決方法がわからない状況です。
補足情報（FW/ツールのバージョンなど）
views.py
from django.shortcuts import render from django.conf import settings from django.http import JsonResponse from .forms import ConnectForm from connectapp.models import User def index(request): my_dict = { 'form': ConnectForm(), } # htmlでformを表示するために、my_dictに格納して受け渡し return render(request,'connectapp/start.html',my_dict) def form(request): id = request.POST.get('id') # フォームで入力された値をPOSTメソッドで入手 user_obj = User.objects.get(pk=id) # フォームで入手した値をpkとして、DBの情報を入手 context = { 'user': user_obj, 'form': str(ConnectForm()), } return JsonResponse(context)
start.html
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>テストWebアプリ</title> </head> <body> <form id = "form_1" action="{% url 'connectapp:form' %}" method="post"> {% csrf_token %} {{ form }} <input type="submit" value="送信"> </form> <h1>出力結果</h2> <div class="result"> </div> <!-- <h1> 名前: {{ user.name | linebreaks }} </h1> <h1> 歳: {{ user.age | linebreaks }} </h1> <h1> 懸賞金: {{ user.bounty | linebreaks }} </h1> --> <!-- {% block page_content %}{% endblock %} --> </body> </html>
Ajax
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> 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; } var csrftoken = getCookie('csrftoken'); function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); } $.ajaxSetup({ beforeSend: function (xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } } }); $('#form_1').submit(function(e) { e.preventDefault(); $.ajax({ 'url': "{% url 'connectapp:form' %}", 'type': 'POST', 'data': { 'id': $('#form_1').val(), }, 'dataType': 'json' }) .done(function(response){ $('.result').prepend('<p>名前:'+ response.user.name + '</p>'); $('.result').prepend('<p>歳:'+ response.user.age + '</p>'); $('.result').prepend('<p>懸賞金:'+ response.user.bounty + '</p>'); $('.form').prepend(response.form); }); }); </script>
urls.py
from django.urls import path from . import views app_name = "connectapp" urlpatterns = [ path('', views.index, name='index'), path('form',views.form, name='form')
0 コメント