Ajax 重新加载按钮答案

【问题标题】：Ajax Reload ButtonAjax 重新加载按钮
【发布时间】：2014-10-05 16:39:44
【问题描述】：

我正在尝试在带有 Ajax 的网页上的 div 中放置一个简单的 python 脚本（这里我使用了一个可以正常工作的随机二字生成器），并在下方有一个按钮来重新加载它。页面成功加载了脚本...然而，我还没有完全理解丢失的部分来再次调用脚本以重新加载由python脚本（我理解为什么下面的代码是错误的，但我不知道如何使它正确！）。非常感谢指针！

（注：是的，我正在使用 Python 2.4，因为我的虚拟主机尚未升级 - 他们很快就会升级！是的，我看到了 this 问题，但它对我不起作用......）

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Find a sentence</title>
    <script src="http://code.jquery.com/jquery-2.0.3.js"></script>
    <script>
        $(function()
        {
            $.ajax({
                url: "cgi-bin/test.py",
                type: "GET",
                data: {foo: 'bar', bar: 'foo'},
                success: function(response){
                        $("#div").html(response);
                    }
           });
        });
    </script>
</head>
<body>
    <div id="div"></div>

<form name="input" action="cgi-bin/test.py" method="get">
<input type="submit" value="Regenerate!">
</form>

</body>

Python：

#!/usr/bin/env python
# -*- coding: UTF-8 -*-

# enable debugging
import cgitb
cgitb.enable()

import linecache
from random import randrange

print "Content-Type: text/html"
print

# file length counter

def file_len(fname):
    f = open(fname)
    try:
        for i, l in enumerate(f):
            pass
    finally:
        f.close()
    return i + 1

# range sizes

one_size = file_len('text/one.csv')
two_size = file_len('text/two.csv')

# random lines

one_line = randrange(one_size) + 1
two_line = randrange(two_size) + 1

# outputs

one_out = linecache.getline('text/one.csv', one_line)
two_out = linecache.getline('text/two.csv', two_line)

# output

sentence = one_out.strip('\n') + " " + two_out.strip('\n') + " "
print sentence

【问题讨论】：

标签： python html ajax

【解决方案1】：

好吧，我假设必须单击“重新生成”按钮才能重新加载表单。我的想法是将ajax逻辑放在一个单独的函数中。我认为您不需要那里的表单，因为您的重新加载调用现在是 ajax 调用。

<head>
<script>
    function reload() {
        $.ajax({
            url: "cgi-bin/test.py",
            type: "GET",
            data: {foo: 'bar', bar: 'foo'},
            dataType : "html",
            success: function(response){
                    $("#div").html(response);
                }
       });
    }

    $(window).load(function() {
        reload();
        $("#reload_button").click(function() {
            reload();
        });
    });
</script>
</head>

<body>
    <div id="div"></div>
    <input type="button" id="reload_button" value="Regenerate!">
</body>

【讨论】：

太棒了！这非常有效。只需要了解你现在做了什么:)
它非常简单。我创建了一个名为 reload 的函数，调用该函数时将执行 ajax 调用以从 thw 后端获取相关数据。然后我确保在页面完成加载时调用 reload 函数。我还确保一旦页面完成加载，点击事件与重新生成按钮相关联。当我们点击按钮时，会再次调用 reload 函数。