如何在django中单击template.html中的按钮时调用views.py中的函数答案

【问题标题】：How to call a function in views.py on clicking a button in template.html in django如何在django中单击template.html中的按钮时调用views.py中的函数
【发布时间】：2020-01-20 10:14:05
【问题描述】：

我有一个表单，其中有一个按钮。我想在我的views.py 中调用一个名为def recognize(): 的视图函数，但是在单击页面后不应重新加载，并且不应清除按钮之前输入的值。

模板文件

                 <form>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="first_name">First Name</label>
                            <input type="text" name="first_name" class="form-control" id="first_name" required/>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="last_name">Last Name</label>
                            <input type="text" name="last_name" class="form-control" id="last_name" required/>
                        </div>
                    </div>

                    <button type="button" class="mybtn">Open Camera</button> // THIS IS THE BUTTON TO BE CLICKED

                    <button type="submit" class="btn btn-danger">Submit</button>
                </form>

VIEWS.PY（隐藏额外细节）

def recognize(request):
    size = 4
    haar_file = 'C:\\Users\\Aayush\\ev_manage\\face_detector\\haarcascade_frontalface_default.xml'
    datasets = 'C:\\Users\\Aayush\\ev_manage\\face_detector\\datasets'
    while True:
        (_, im) = webcam.read()
        gray = cv2.cvtColor(im, cv2.COLOR_BGR2GRAY)
        faces = face_cascade.detectMultiScale(gray, 1.3, 5)
        for (x, y, w, h) in faces:
            cv2.rectangle(im, (x, y), (x + w, y + h), (255, 0, 0), 2)
            face = gray[y:y + h, x:x + w]
            face_resize = cv2.resize(face, (width, height))
            # Try to recognize the face
            prediction = model.predict(face_resize)
            cv2.rectangle(im, (x, y), (x + w, y + h), (0, 255, 0), 3)

            if prediction[1] < 90:

                cv2.putText(im, '% s - %.0f' %
                            (names[prediction[0]], prediction[1]), (x - 10, y - 10),
                            cv2.FONT_HERSHEY_PLAIN, 1, (0, 255, 0))
            else:
                cv2.putText(im, 'not recognized',
                            (x - 10, y - 10), cv2.FONT_HERSHEY_PLAIN, 1, (0, 255, 0))

        cv2.imshow('OpenCV', im)

        key = cv2.waitKey(10)
        if key == 13:
            break

    webcam.release()
    cv2.destroyAllWindows()

基本上，我希望在单击“打开相机”按钮后，我的识别（）函数应该被调用，并且 OpenCV 人脸检测相机应该打开......但这一切都不应该影响上述输入中填充的数据在模板中。最后，我要求大家发表一个答案，而不是用代码解决方案发表评论，因为我是python的菜鸟。

【问题讨论】：

标签： javascript python html django python-3.x

【解决方案1】：

将 href 添加到按钮类并在 urls.py 中添加一行。单击按钮后，它将调用它导入的视图的函数，并将调用该函数。

 HTML FILE
   <button type="button" class="mybtn" href="{% url 'recognize_me'%}">Open 
    Camera</button> // THIS IS THE BUTTON TO BE CLICKED

 url.py
  from .import views
  path('/recognize', views.recognize, name='recognize_me')

【讨论】：

我已经尝试过这个确切的解决方案，但它会刷新当前表单页面，因为它将 url 路径更改为 /recognize
请提供其他解决方案
其他方法不起作用，因为您试图在浏览器中渲染 cv2 生成的帧，因为您需要在调用函数时返回每个帧......@987654321 @此链接可能会为您提供当前问题的上下文..

【解决方案2】：

您可以考虑使用 Ajax。在您的模板中：

<form>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="first_name">First Name</label>
                            <input type="text" name="first_name" class="form-control" id="first_name" required/>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="last_name">Last Name</label>
                            <input type="text" name="last_name" class="form-control" id="last_name" required/>
                        </div>
                    </div>

                    <button type="button" class="mybtn" id="open_camera_button">Open Camera</button> // THIS IS THE BUTTON TO BE CLICKED

                    <button type="submit" class="btn btn-danger">Submit</button>
                </form>
<script>
$('#open_camera_button').click(function(event){
    $.ajax({
        url: 'recognize/',
        success: function(result){
            console.log("done, result=%s", result);
        }
    });
});

</script>

您可能需要通过添加 CSRF 保护来增强此解决方案

【讨论】：