我正在制作和应用程序,它通过html实时向用户发送数据,并且我希望每次用户释放键时都更新段落标签。
我的HTML:
<form method="POST">
{% csrf_token %}
<p id="amount_word" class="amount_word" style="text-align:center">{{ amount_words }}</p>
</form>
我的javascript(“ texteditor”是我拥有的textarea):
$("#texteditor").keyup(function(event){
data = {'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val()};
$.ajax({
type:'POST',
url:'/write/',
datatype: 'JSON',
data: data,
success: function(data) {
console.log(data) // check out how data is structured
$('.amount_word').contents()[0].textContent = data.amount_words
}
})
})
我的python视图:
def write_view(request, *args, **kwargs):
if request.is_ajax() and request.method == "POST":
def send_text():
texteditor = request.POST['TextEntered']
amount_words = "Amount of words: " + texteditor
print(amount_words)
texteditor = request.POST.get('TextEntered')
if texteditor == 'NoneType':
print("NoneType here")
else:
send_text()
return JsonResponse({'amount_words': amount_words})
return render(request, "write.html")
else:
return render(request, "write.html")
模板是write.html,URL是/ write
最佳答案
试试这个对我有用
<form method="POST">
{% csrf_token %}
<p id="amount_word" class="amount_word" style="text-align:center">amount:{{ amount_words }}</p>
<input type="text" id="texteditor" >
</form>
jQuery的
$("#texteditor").keyup(function(event){
data = {'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val(),
'TextEntered': $('#texteditor').val()};
console.log("keyup = ", data);
$.ajax({
type:'POST',
url:'/write/',
datatype: 'JSON',
data: data,
success: function(data) {
console.log(data) // check out how data is structured
$('.amount_word').contents()[0].textContent = data.amount_words
}
});
});
在视图中
import json
from django.http import HttpResponse
def write_view(request, *args, **kwargs):
if request.is_ajax() and request.method == "POST":
texteditor = request.POST['TextEntered']
amount_words = "Amount of words: " + texteditor
print(amount_words)
texteditor = request.POST.get('TextEntered')
return HttpResponse(json.dumps({'amount_words': amount_words}), content_type="application/json")
else:
return render(request, "write.html")