相关信息:
1)第一篇文章在这里，放轻松。
2)我是菜鸟。
3) 尝试学习 python/Django。
我正在尝试做什么:
1)创建一个英语-> pig 拉丁语翻译器(用Python编写)并让它在浏览器中工作。
我希望它如何工作:
1) 用户单击“翻译”按钮，然后使用我现有的 python 函数来翻译他们的输入。
2) 翻译结果会显示在输入内容下方。
到目前为止我所做的事情:
1) 创建了 .py 文件，在控制台中成功翻译英语 -> pig 拉丁语。
def pigLatin(sentence):
translation = " "
for word in sentence.split():
if word[0] in "aeiou":
translation += word + "yay "
if word[0] and word[1] not in "aeiou":
translation += word[2:] + word[0:2] + "ay"
print("hai")
else:
translation += word[1:] + word[0] + "ay "
return translation
sentence = input("Enter word/sentence you want translated to pig latin below: ")
print(pigLatin(sentence))
2) 使用 Jinja/添加了一些 HTML 和 Bootstrap (请参见下文)
3)创建了一个 Django 项目，并安装了我的 Pig Latin 应用程序，我的文件夹结构如下:
--mysite
|
|--pigLatinApp
|----templates
|------pigLatinApp
|--------home.html
|--------header.html
3)尝试使用Ajax让我的按钮工作，我的HTML文件和views.py如下:
header.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Pig Latin Translator</title>
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">
</head>
<body class="body">
<section id="translatorSection">
<!------------------Log Sum Container-------------------------->
<div class="container" id="translatorContainer">
{% block content %}
{% endblock %}
</div>
</section>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js">
</script>
</body>
</html>
home.html
{% extends "pigLatinApp/header.html" %}
{% block content %}
<div class="row">
<div class="col-md-6">
<form>
<h3>Pig Latin Translator</h3>
<p>Enter below what you want translated!</p>
<input type="string" class="form-control" placeholder="Type what you want translated here!" id="inputSumA">
<button id="translateToPig" class="btn btn-success form-control">Translate</button>
<div id="displayTranslation">
<p>{{ output }}</p>
</div>
</form>
</div>
</div>
<script>
$("#translateToPig").click(function() {
$.get("/output/", function(data) {
$("#displayTranslation").html(data);
}, "html");
});
</script>
{% endblock %}
views.py
from django.shortcuts import render
from django.http import HttpResponse
def index(request):
return render(request, 'pigLatinApp/home.html')
def output(request):
if request.is_ajax():
py_obj = pigLatinTranslator.test_code(10)
return render(request, 'pigLatinApp/output.html', {'output': py_obj.a})
单击按钮时实际发生的情况:
1) 没什么...页面似乎刷新了。
任何和所有的帮助将不胜感激，干杯!
最佳答案
这里:
<script>
$("#translateToPig").click(function() {
$.get("/output/", function(data) {
$("#displayTranslation").html(data);
}, "html");
});
</script>
您的 click 事件处理程序不会阻止该事件的默认操作，因此您的表单由浏览器提交。由于您的表单没有“action”属性，因此它会提交到当前 url，因此会调用索引 View 并重新加载页面。
您可以通过在事件上调用 preventDefault() 来防止这种情况，即:
<script>
$("#translateToPig").click(function(evt) {
evt.preventDefault(); # prevents posting the form
evt.stopPropagation(); # make sure it doesn't bubble up
$.get("/output/", function(data) {
$("#displayTranslation").html(data);
}, "html");
});
</script>
现在您的代码中有一些可以改进的地方，但这是另一个主题了。至少我认为你应该首先尝试让一些东西在没有ajax的情况下工作，这样你就可以学习整个请求/响应周期的内容，使用GET和POST，使用django表单等。
关于javascript - 在 HTML 按钮上单击运行 python 文件 (Django)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47078133/