2014-10-05 47 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