如何使用ajax-on-key-up将这个变量从Django视图发送到html？

Question

我正在制作和应用程序，发送数据在html中的用户实时，我想更新的段落标签，每次用户释放一个关键

我的HTML:

<form method="POST">
{% csrf_token %}
<p id="amount_word" class="amount_word" style="text-align:center">{{ amount_words }}</p>
</form>

我的javascript（'texteditor'是我拥有的文本区域）：

$("#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

Answer 1

试试这个它对我有用

<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")