Djangoを使ってformをajaxする方法
Djangoでのfromをajaxする方法
Djangoでweb開発の勉強をしています。投稿を非同期通信でdjangoにデータを送信する仕組みを作っています。jqueryでajaxしようとしたいのですがurlやデータが文字化けしてしまい、上手くデータを送れません。Djangoで受け取った{{form.as_p}}をajaxのdataに入れる方法と文字化けしない方法を教えて欲しいです。
Invalid or unexpected token
Uncaught SyntaxError: Invalid or unexpected token
データを受け取った後に文字化けしたデータが返されてしまう
スクリーンショット 2021-11-25 17.22.53.png
post.html
{% block contents %}
<main>
<div class="container">
<form id="content_form" action="{% url 'post:posts' to_user.id %}" method="post">
{% csrf_token %}
<p>{{ form.as_p }}</p>
<button type="submit">送信</button>
</form>
<div id="posts">
<!-- UserのPost一覧 -->
{% for post in posts reversed %}
<div class="post">
<span class="content">{{post.content}}</span>
<span class="count_{{post.id}}">{{post.good_count}}</span>
<button class="good" name="{{post.id}}" type="button">good</button>
<span class="error_{{post.id}}"></span>
</div>
{% endfor %}
</div>
</div>
</main>
{% block extrajs %}
<script>
var i = 'Hello World'
console.log(i)
window.addEventListener('DOMContentLoaded', function(){
$('#content_form').on('submit', function(e) {
e.preventDefault();
var form = $(this);
$.ajax({
url: form.prop("action"),
method: form.prop("method"),
dataType: 'json',
data: {
content: '{{form.as_p}}',
},
success:function(response){
const p = $('.test1'.text(response.content));
const c = $('.test2'.text(response.good_count));
$('.test').prepend(p);
$('.test').prepend(c);
alert(data);
$('#content_form').val('');
},
})
})
})
</script>
{% endblock %}
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
{% endblock %}
</body>
views.py
from django.shortcuts import render
from django.shortcuts import redirect
from .forms import PostForm, CreatePostForm
from django.contrib.auth.decorators import login_required
from .models import Post, Good
from accounts.models import CustomUser
import json
from django.http import JsonResponse
@login_required
def createpost(request, pk):
# <int:id>の取得をする
to_user = CustomUser.objects.get(pk=pk)
if (request.method == 'POST'):
# postを作成する
p = Post()
p.owner_id = request.user.pk
# page/<int:id>を引っ張ってきてto_userにする
p.to_user = to_user
p.content = request.POST.get('content')
p.save()
# データを返す
d = {
'content': p.content,
'good_count': p.good_count,
}
return JsonResponse(d)
# UserへのPostを取得
posts = Post.objects.filter(to_user=pk).order_by('good_count')
# 共通処理
params = {
'login_user':request.user,
'form':CreatePostForm,
'to_user':to_user,
'posts':posts,
}
return render(request, 'post.html', params)
自分で試したこと
Cookieを受け取れてないのかと思い、調べてCookieを取得するシステムも試してみましたが、JQuery in not definedというエラーが出てこれも上手く行きませんでした。あらゆるエンコードを指定するコードも設定してみましたが、文字化けは変わらないままでした。
0
