【发布时间】:2021-09-14 09:00:57
【问题描述】:
我认为这个问题有一个非常简单的解决方案,但是我已经在 google 上搜索了几个小时并没有设法解决它。
我正在开发的网站允许用户将电影添加到观看列表。
它有一个搜索功能,可以使用 OMDB API 按标题浏览电影(效果很好)。然后它会渲染所有电影海报和标题以及分配给每部电影的按钮。然后该按钮获取 img src 链接、特定电影的标题和发行年份,并向 movie_forms 表单发送 AJAX POST 请求。该请求确实有效,因为它将数据添加到模型中,但是当我发送发布请求时,外键是空白的(它在管理视图上显示为'-----')。这是我的代码!
urls.py
urlpatterns = [
path('', views.homepage, name='homepage'),
path('signup/', views.signup_view, name='signup'),
path('login/', views.login_view, name='login'),
path('logout/', views.logout_view, name='logout'),
path('movie_form/', views.mlf_view, name='movie_form'),
]
views.py
def mlf_view(request):
form = MovieListForm()
if request.method == 'POST' and request.is_ajax():
print(request.body)
form = MovieListForm(request.POST)
if form.is_valid() and request.is_ajax():
title = form.cleaned_data.get('title')
img_link = form.cleaned_data.get('img_link')
plot = form.cleaned_data.get('plot')
release_date = form.cleaned_data.get('release_date')
score = form.cleaned_data.get('score')
form.user = request.user
form.save()
print('form is valud')
return JsonResponse({"title": title,
"img_link": img_link,
"plot": plot,
"release_date": release_date,
"score": score}, status=200)
else:
print(form.errors)
return render(request, 'main/movie_form.html', {'form': form})
models.py
class MovieList(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE, unique=True)
title = models.CharField(max_length=300)
img_link = models.TextField()
release_year = models.IntegerField()
def __str__(self):
return self.title
forms.py
class MovieListForm(forms.ModelForm):
class Meta:
model = MovieList
fields = ['title', 'img_link', 'release_year']
GetMovies.js(从输入中获取值,并渲染出电影信息)
const getMovies= () => {
var title = document.getElementById('title').value
var div = document.getElementById('movies')
console.log(title)
fetch('http://www.omdbapi.com/?apikey=b53dac20&s=' + title + '&type=movie')
.then((res) => res.json())
.then((response) => {
for (var i = 0; i < response.Search.length; i++) {
/// create div for each element ///
var indDiv = document.createElement('div')
/// creates p tag for title ///
var movie_title = document.createElement('P')
movie_title.innerHTML = response.Search[i].Title
movie_title.id = "title" + i
/// creates p tag for release year ///
var release_year = document.createElement('P')
release_year.innerHTML = response.Search[i].Year
release_year.id = 'year' + i
/// creates img tag with poster link provided by the API and adds unique ID for each img tag ///
var poster= document.createElement('IMG')
poster.src = response.Search[i].Poster
poster.id = 'img' + i
/// creates button for each div ///
var button = document.createElement('BUTTON')
button.classList.add("btn")
button.value = i
button.innerHTML = 'click'
button.setAttribute('onclick', 'addMovie(this.value)')
/// appends poster and button to the individual divs and appends those to the main div ///
indDiv.appendChild(poster)
indDiv.appendChild(button)
indDiv.appendChild(movie_title)
indDiv.appendChild(release_year)
div.appendChild(indDiv)
console.log(indDiv)
}
})
}
AddMovie.js(发送 AJAX POST 请求)
function addMovie(value) {
var token = Cookies.get('csrftoken');
$.ajax({
url: "http://127.0.0.1:8000/movie_form/",
type: "POST",
headers: {"X-CSRFToken": "{{ csrf_token }}"},
data: {
title:$("#title" + value).text(),
img_link:$("#img" + value).prop('src'),
release_year:$("#year" + value).text(),
csrfmiddlewaretoken: token,
action: "post"
},
success:function(data) {
console.log('worked!')
},
error:function(xhr, status, error) {
console.log(xhr.statusText)
}
})
}
编辑:添加了我的 html
电影形式
<div class="container mt-5 w-50">
<form id="movieForm" method="POST">
{% csrf_token %}
{% for field in form %}
<p>{{field.label_tag}}</p>
{{field}}
{% endfor %}
<button>test</button>
</form>
【问题讨论】:
标签: javascript python jquery django backend