Estoy creando una aplicación Django y en una de mis hojas HTML, tengo un botón que primero debería ejecutar una función js (ocr()) y luego otra función en .py.
He probado la primera solución a esta publicación. Y ahora ejecuta la función javascript pero no pasa a la función en .py.
ACTUALIZACIÓN: agregué el evento onsubmit y la función devuelve verdadero ahora. Pero todavía no funciona.
Este es el script js:
<div> <script> var ocr = function(event){ event.preventDefault(); Tesseract.recognize( document.getElementById('imgde').src, 'deu', { logger: m => console.log(m) } ).then(({ data: {text}}) => { console.log(text); document.getElementById('txt_voc_de').innerHTML = ['<input type="hidden" name="txt_voc_de" id="txt_voc_de" value="',text, '"/>'].join(''); }) Tesseract.recognize( document.getElementById('imgen').src, 'eng', { logger: m => console.log(m) } ).then(({ data: {text}}) => { console.log(text); document.getElementById('txt_voc_en').innerHTML = ['<input type="hidden" name="txt_voc_en" id="txt_voc_en" value="',text, '"/>'].join(''); }) }; var form = document.getElementById("imgForm"); form.addEventListener("submit", ocr, true); </script> <input type="submit" onsubmit="ocr();" id="senden" class="inputfiles" /> <button for="senden" class="button" id="weiter_btn" >WEITER</button> {% csrf_token %} </div>ACTUALIZACIÓN 2:
Ahora estoy tratando de enviar una solicitud a una URL en la función JS y hacer que una vista la recoja. Pero solo devuelve la hoja html anterior.
Este es el script actualizado:
<div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> $(document).ready(function () { $("#imgForm").submit(function (event) { event.preventDefault(); $.ajax({ type: "POST", beforeSend: function() { Tesseract.recognize( document.getElementById('imgde').src, 'deu', { logger: m => console.log(m) } ).then(({ data: {text}}) => { console.log(text); document.getElementById('txt_voc_de').innerHTML = ['<input type="hidden" name="txt_voc_de" id="txt_voc_de" value="',text, '"/>'].join(''); }) Tesseract.recognize( document.getElementById('imgen').src, 'eng', { logger: m => console.log(m) } ).then(({ data: {text}}) => { console.log(text); document.getElementById('txt_voc_en').innerHTML = ['<input type="hidden" name="txt_voc_en" id="txt_voc_en" value="',text, '"/>'].join(''); }) } , url: "/upload/", success: function () { $('#message').html("<h2>Contact Form Submitted!</h2>") } }); return false; }); }); </script> <input type="submit" id="senden" class="inputfiles"/> <button for="senden" class="button" id="weiter_btn" >WEITER</button> {% csrf_token %} </div>El problema probablemente es que la función beforesend está en javascript, ¿verdad? Pero, ¿hay alguna manera de ejecutar esa función en javascript antes de la solicitud de ajax?
Y esta es mi función en views.py
def upload(request): if request.is_ajax(): message = "Yes" txt_voc_en = request.POST.get("txt_voc_en") txt_voc_de = request.POST.get("txt_voc_de") print(txt_voc_de) print(txt_voc_en) vocsde = ocr_core(txt_voc_de) vocsen = ocr_core(txt_voc_en) messages.success(request, vocsde, extra_tags="de") messages.success(request, vocsen, extra_tags="en") context = {'vocsen': vocsen, 'vocsde': vocsde} return render(request, 'success.html', context) else: message = "Not ajax" return HttpResponse(message)Según su pregunta, primero desea procesar algunos datos de formulario a través de JavaScript, incrustando los resultados en tipos de entrada ocultos. Finalmente, desea enviar los datos de entrada ocultos a views.py para un proceso posterior. En el script actualizado, mezcló javascript con AJAX. Puede actualizar su secuencia de comandos de la siguiente manera:
<script> var ocr = function(event) { event.preventDefault(); Tesseract.recognize( document.getElementById('imgde').src, 'deu', { logger: m => console.log(m) } ).then(({ data: { text } }) => { console.log(text); Tesseract2(text); }) }; function Tesseract2(text_de) { Tesseract.recognize( document.getElementById('imgen').src, 'eng', { logger: m => console.log(m) } ).then(({ data: { text } }) => { console.log(text); AjaxCall(text_de, text); }) } function AjaxCall(text_de, text_en) { $.ajax({ type: 'POST', url: "/upload/", data: { csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(), // to avois csrf error txt_voc_en: text_en, txt_voc_de: text_de }, success: function(json) { //Do whatever you want }, error: function(xhr, errmsg, err) { console.log(xhr.status + ": " + xhr.responseText); } }); } var form = document.getElementById("imgForm"); form.addEventListener("submit", ocr, true); </script>Este código primero realizará el preprocesamiento a través de javascript y luego lo enviará a views.py a través de AJAX con los parámetros requeridos "txt_voc_en" y "txt_voc_de".
Puede enviar una solicitud a una URL en la función JS y hacer que una vista la recoja.