前提
Djangoにて、ajax通信を用いてform内容を非同期でPOSTする機能を実装中。
実装は無事できまして、formに入力した内容を問題なくデータベースに登録することができました。
しかし、formを入力するページ内にiframe要素を入れると、ajax通信が機能しなくなる。
現状ではiframe要素には、ただ別のサイトを表示させているだけでそれ以外のことは何も行っておらず、iframe要素が同じページに存在しているだけで、ajax通信が機能しなくなってしまう原因がわからず苦戦しております。
プログラミング初心者です、基本的な内容で恐縮ですがご教授いただけますと幸いです。
実現したいこと
iframe要素が同ページ内にあっても非同期でPOSTできる様に実装したい。
何故iframe要素があるとajax通信が上手くいかないのかを理解したい。
発生している問題・エラーメッセージ
エラーは発生しませんが、Django内のファイルviews.pyでif request.is_ajax(): がfalseだと、formの内容をSAVEせずに、renderする様にしているので、renderされてします。
該当のソースコード
python:views.py
1from .forms import CommentCreateForm 2from .models import Comment 3from django.http import JsonResponse 4 5def photo_add_view(request): 6 form = CommentCreateForm(request.POST or None) 7 data = {} 8 if request.is_ajax(): #←iframe要素が同ページ内にあると、ここがfalseになってしまう。iframe要素がなければ問題なく実装できております。 9 if form.is_valid(): 10 form.save() 11 data['title']= form.cleaned_data.get('title') 12 data['status']= 'ok' 13 return JsonResponse(data) 14 context = { 15 'form': form, 16 } 17 return render(request, 'building/main.html', context) 18 19以下、当該機能と関係ないため省略 20・・・・・ 21
HTML:base.html
1{% load static %} 2 3<!doctype html> 4<html lang="ja"> 5 <head> 6 <title>モデルビューアー</title> 7 <!-- Required meta tags --> 8 <meta charset="utf-8"> 9 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 10 11 <!-- Bootstrap CSS --> 12 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 13 14 </head> 15 <body> 16 <div class='container mt-3'></div> 17 {% block content %} 18 {% endblock %} 19 20 <!-- Optional JavaScript --> 21 <script type="text/javascript" src="{% static 'javascript/comment.js' %}"></script> 22 23 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 24 <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> 25 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 26 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 27 </body> 28</html> 29
HTML:main.html
1{% extends 'building/base.html' %} 2{% load crispy_forms_tags %} 3 4{% block content %} 5 6<div class='mt-3'> 7 <div id='alert-box'></div> 8 <form id='p-form' autocomplete="off"> 9 {% csrf_token %} 10 {{form|crispy}} 11 <button type='submit' class='btn btn-primary'>Send</button> 12 </form> 13 <div> 14 <iframe id="viewer" 15 title="viewer" 16 width="100px" 17 height="100px" 18 src="適当なURL"> 19 </div> 20</div> 21{% endblock %}
Javascript:comment.js
1const alertBox = document.getElementById('alert-box'); 2const form = document.getElementById('p-form'); 3 4const title = document.getElementById('id_title'); 5const text = document.getElementById('id_text'); 6const cordinate = document.getElementById('id_cordinate'); 7const csrf = document.getElementsByName('csrfmiddlewaretoken'); 8const url = ''; 9 10const handleAlerts = (type,text) => { 11 alertBox.innerHTML = `<div class="alert alert-${type}" role="alert"> 12 ${text} 13 </div>` 14} 15 16form.addEventListener('submit',e=>{ 17 e.preventDefault() 18 const fd = new FormData(); 19 fd.append('csrfmiddlewaretoken', csrf[0].value); 20 fd.append('title', title.value); 21 fd.append('text', text.value); 22 fd.append('cordinate', cordinate.value); 23 24 $.ajax({ 25 type: 'POST', 26 enctype: 'multipart/form-data', 27 data: fd, 28 success: function(response){ 29 console.log(response); 30 const sText = `succeccfully saved ${response.title}` 31 handleAlerts('success', sText) 32 setTimeout(()=>{ 33 alertBox.innerHTML='' 34 title.value = '' 35 text.value = '' 36 cordinate.value = '' 37 },2000) 38 }, 39 error: function(error){ 40 handleAlerts('danger', 'upps..somthing went wrong') 41 }, 42 cache: false, 43 contentType: false, 44 processData: false, 45 }) 46});
試したこと
①CSRF関連の原因かと思い、調べてみたのですがそれっぽい情報を取得することができませんでした。
②iframeで表示しているサイト側の問題の可能性について。現状は自分自身がゲームエンジンで作成した物(静的なサイト)を表示していますが、iframe内のsrcを空にして、iframe要素のみを残した場合でも同様の現象が起こってしまった。
補足情報(FW/ツールのバージョンなど)
Django 3.2.7
Python 3.9.7
プログラミング初心者でして、基本的な内容で申し訳ありませんがご教授いただけますと幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。