Django如何制作一个首先运行js函数然后在.py中运行的按钮

Question

我正在构建一个 Django 应用程序，在我的一个 HTML 表单上，我有一个按钮，应该首先运行一个 js 函数（ocr()），然后在 .py 中运行另一个函数。

我已经尝试了this 帖子的第一个解决方案。现在它运行 javascript 函数，但它不会继续运行 .py 中的函数。

更新： 我添加了 onsubmit 事件，该函数现在返回 true。但是还是不行。

这是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>

更新 2：

我现在正在尝试向 JS 函数中的 URL 发送请求，并让它被视图拾取。但它只返回之前的 html 表单。

这是更新后的脚本：

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

问题可能是 beforesend 函数在 javascript 中，对吗？ 但是有没有办法可以在 ajax 请求之前在 javascript 中运行该函数？

这是我在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)

Answer 1

根据您的问题，您首先希望通过 JavaScript 处理一些表单数据，将结果嵌入到隐藏的输入类型中。最后，您希望将这些隐藏输入的数据发送到 views.py 以进行进一步处理。在更新的脚本中，您将 javascript 与 AJAX 混合在一起。您可以按如下方式更新您的脚本 -

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

此代码将首先通过 javascript 进行预处理，然后通过 AJAX 将其发送到 views.py，并带有必需的参数“txt_voc_en”和“txt_voc_de”。

Answer 2

您可以向 JS 函数中的 URL 发送请求，并让视图获取它。

This post should help you