Question

相关信息：

1）首先发布在这里，轻松一点。

2）我是个菜鸟。

3）尝试学习python / Django。

我正在尝试做什么：

1）创建一个英语 - ＆gt; pig latin翻译器（用python编写）并在浏览器中工作。

我希望它如何运作：

1）用户点击“翻译”按钮，然后使用我现有的python函数翻译他们的输入。

2）然后翻译显示在输入下方。

到目前为止我做了什么：

1）创建成功翻译英语的.py文件 - ＆gt;猪拉丁在控制台。

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（请参见下文）

What it looks like in browser

3）创建了一个Django项目，并安装了我的猪拉丁应用程序，我的文件夹结构如下：

--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）没什么......页面似乎在刷新。

欢迎任何和所有帮助，欢呼！

Answer 1

下面：

<script>
$("#translateToPig").click(function() {
    $.get("/output/", function(data) {
        $("#displayTranslation").html(data);
    }, "html");
});
</script>

您的click事件处理程序不会阻止事件的默认操作，因此您的表单由浏览器提交。由于您的表单没有“action”属性，因此将其提交到当前url，因此将调用索引视图并重新加载页面。

您可以通过在事件上调用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表单等。

Answer 2

我建议尝试正常的请求，即不是ajax，还要创建form.py，您可以在其中为搜索创建表单类。在您的视图中导入pig latin翻译器功能并在output功能中调用它。

在HTML按钮上运行python文件单击（Django）

2 个答案: