2014-10-05 43 views
0

我想在一个带有Ajax的网页的div上放一个简单的python脚本(这里我使用了一个随机的双字生成器,它可以正常工作),并在它下面有一个按钮重新加载它。该页面成功加载脚本... 但是,我还没有完全想到我的头再次调用脚本来重新加载由python脚本所做的随机两个单词(我明白为什么下面的代码是错误的,但我无法弄清楚如何使它正确!)。指针非常感谢!Ajax Reload Button

(!NB是的,我使用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 

回答

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> 
+0

太棒了!这工作完美。只需要了解你现在做了什么:) – joep1 2014-10-07 08:37:16

+1

它非常简单。我创建了一个名为reload的函数,它在被调用时会执行ajax调用以从后端获取相关数据。然后我确定在页面加载完成时调用重载功能。我还确保在页面加载完成后,点击事件与再生按钮关联。当我们点击按钮时,再次调用重载功能。 – thisisshantzz 2014-10-07 13:07:28