AJAX post запрос с django и python

ProgramBox

AJAX post запрос с django и python

Post author:admin
Запись опубликована:20 ноября, 2022
Post category:Вопросы по программированию

#javascript #python #django #ajax #post

#javascript #python #django #ajax #Публикация

Вопрос:

Я пытаюсь создать веб-приложение на django, где пользователь может записывать что-то, что затем превращается в текст и после этого отправляется на сервер с помощью AJAX. Я провел некоторое исследование и нашел эту статью: https://medium.com/@manask322/implementing-speech-to-text-feature-in-a-django-app-f0fa53bb3e03

Итак, я скопировал html-код: (это только часть, которую я скопировал)

 <div id='result'>
    Your text will  appear here
  </div>
  <br>
  <div id= 'record'>
      <button onclick="startConverting()" class='btn btn-info btn-sm' id="re">record</button>
      <button class='btn btn-info btn-sm ml-3' value="Send" id="send">Send</button>
  </div>

  <script>
     function startConverting()
            {
              document.getElementById("re").style.visibility = "hidden";   
              var r=document.getElementById('result');
              var spr=new webkitSpeechRecognition(); //Initialisation of web Kit
                spr.continuous=false; //True if continous conversion is needed, false to stop transalation when paused 
                spr.interimResults=true;
                spr.lang='en-IN'; // Set Input language
                spr.start(); //Start Recording the voice 
                var ftr='';
                spr.onresult=function(event){
                    var interimTranscripts='';
                    for(var i=event.resultIndex;i<event.results.length;i  )
                    {
                        var transcript=event.results[i][0].transcript;
                        transcript.replace("n","<br>")
                        if(event.results[i].isFinal){
                            ftr =transcript;
                        }
                        else
                        interimTranscripts =transcript;
                    }
                    r.innerHTML=ftr  interimTranscripts ;
                };
                spr.onerror=function(event){};
            }
            $(document).ready(function() {
                $("#send").click(function(event){
                      $.ajax({
                          type:"POST",
                          url:"/audio_data",
                          data: {
                                  send : $('#result').html()
                                  },
                          
                      });
                });
              });
  </script>
</div>

Но изменил функцию в views.py немного:

 @csrf_exempt
def audio_data(request):
    if request.method == 'POST':
        result = request.POST['send']
        return render(request, 'success.html')
        
        
    elif request.method == 'GET':
        return render(request, 'afterContinue.html')

Запись работает, и она также отображает текст, который вы произносите, но когда вы нажимаете «Отправить», ничего не происходит.
Кто-нибудь знает, почему?

ОБНОВЛЕНИЕ: это urls.py часть:

 urlpatterns = [
    path("", views.index, name="index"),
    path('admin/', admin.site.urls),
    path('audio_data', views.audio_data)
]

1. почему вы ищете запрос send inside. POST [‘отправить’]???

2. @Syed Khizaruddin Я думал, что это имя, и в статье он делает то же самое. На что я должен смотреть вместо этого? для результата?

3. попробуйте распечатать запрос. ОПУБЛИКУЙТЕ, чтобы вы могли знать, что внутри него

4. Должен ли я попытаться вернуть его в виде сообщения?

5. print(request.POST) вывод будет отображаться на терминале, где вы используете свой сервер разработки django

Ответ №1:

Вы можете попробовать это:

Добавьте jQuery CDN, уменьшенный внутри <head> тега в html-шаблоне:

 <html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    </head>
    <body>
       <div id="result">
            .......
       </div>
    </body>
</html>

Html-шаблон

отправьте параметр save для audio_data просмотра, чтобы он мог распознать, что он должен сохранить аудиотекст.
отправьте данные запроса ajax в формате json.
Проверьте, был ли ответ, отправленный django view, верным или нет.
перенаправить пользователя /audio_data?success=true , если ответ из view был истинным.

 $(document).ready(function() {
    $("#send").click(function(event){
        $.ajax({
            url:  "/audio_data",
            data: {
               'save': true, // Change No.1
               'text': $('#result').html()
            },
            dataType: 'JSON', // Change No.2
            success: function(response) {  // Change No.3
                if (response.ans) {  // Change No.3
                   location.href = '/audio_data?success=true'; // Change No.4
                }
            }
        });
    });
});

views.py

Проверьте, имеет ли значение параметра save значение true или нет.
Проверьте, предоставлен ли аудиотекст или нет.
Возвращает a JsonResponse со словарем, который содержит значение ans переменной, то есть True , если аудиотекст сохранен, и False если текст не предоставлен.
Визуализируйте success.html шаблон, если success параметр равен true .
Если оба save success параметра и False указаны или не указаны, тогда отобразите afterContinue.html шаблон.

 from django.http import JsonResponse

@csrf_exempt
def audio_data(request):
    data = request.GET

    if data.get('save', False): # Change No.5
       ans = True

       text = data.get('text', False) # Change No.6
       if text: // Change No.6
          print('Text = ', text)
          """ Here save the text the way you want. """
       else:
          ans = False

       return JsonResponse({'ans':ans}) # Change No.7

    elif data.get('success', False): # Change No.8
       return render(request, 'success.html')

    return render(request, 'afterContinue.html') # Change No.9

1. Я пробовал это, но я всегда получаю ‘afterContinue.html ‘ после нажатия кнопки отправить. Есть идеи, почему? И, к сожалению, я все еще новичок, поэтому, возможно, я не понял ваш ответ на 100%

2. Хорошо, возможно, данные запроса не читаются. Можете ли вы распечатать запрос. ПОЛУЧИТЬ i.e print(request.GET) и поделиться выводом в комментариях?

3. Я попробовал, но он ничего не печатает.

4. Хорошо, я нашел, почему он показывал только afterContinue.html шаблон. Это произошло из-за ошибки сервера, которая произошла из ans=true -за того, что значение true не определено.

5. Нет, проблема не в этом. Это потому, что вы не добавили jQuery can в свой шаблон. Подождите, я обновлю ответ.