我正在构建一个 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 发送请求,并让它被 View 拾取。但它只返回以前的 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)
最佳答案
根据您的问题,您首先要通过 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”。
关于javascript - Django如何制作一个首先运行js函数然后在.py中运行的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68564397/