我正在制作和应用程序,它通过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")

10-05 20:44
查看更多