使用Bottle（Python）的AJAX提交表單

我在使用Bottle框架獲得AJAX通信的一些問題。這是我第一次使用AJAX，所以我可能只是基本錯誤。希望Bottle/AJAX大師能夠將這個新手指向正確的方向。下面是我使用的代碼：使用Bottle（Python）的AJAX提交表單

#!/usr/bin/env python 

from bottle import route, request, run, get 


# Form constructor route 

@route('/form') 
def construct_form(): 
    return ''' 

<html> 
<head> 
<script type="text/javascript"> 

    function loadXMLDoc() 
    { 
     xmlhttp = new XMLHTTPRequest(); 
     xmlhttp.onReadyStateChange = function() 
     { 
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
      { 
       document.getElementById("responseDiv").innerHTML = xmlhttp.responseText; 
      } 
     } 

    xmlhttp.open("GET", "/ajax", true); 
    xmlhttp.send(); 
    } 

</script> 
</head> 

<body> 

    <form> 
     <input name="username" type="text"/> 
     <input type="button" value="Submit" onclick="loadXMLDoc()"/> 
    </form> 
    <div id="responseDiv">Change this text to what you type in the box above.</div> 

</body> 
</html> 

    ''' 

# Server response generator 

@route('/ajax', method='GET') 
def ajaxtest(): 
    inputname = request.forms.username 
    if inputname: 
     return 'You typed %s.' % (inputname) 
    return "You didn't type anything." 

run(host = 'localhost', port = '8080')

來源

2012-02-06 patrickn

我在Chrome中測試，所以不需要使用特定於IE的代碼 - 萬一有人想到這個問題。 – patrickn 2012-02-06 20:09:06

這裏有幾個問題。

JavaScript區分大小寫。 XMLHTTPRequest應該是XMLHttpRequest。您應該在Javascript控制檯中看到有關此錯誤。
onReadyStateChange應該是onreadystatechange。
如果你解決了上述兩個問題，你的AJAX調用將會起作用，但你只會得到'你沒有輸入任何東西'。響應。這是因爲你正在使用GET。您需要更改代碼，以便使用POST方法發佈表單值。

另外，你爲什麼不使用jQuery做AJAX？這會讓你的生活更輕鬆。 :)

來源

2012-02-06 21:52:43 Alex

謝謝，我知道它會變得簡單。至於不使用jQuery - 在我的編程生涯的這個階段，我被「魔法」激怒了，而且在我繼續前進之前，真的需要看看事情是如何工作的。因此，我使用瓶子（這裏仍然有很多魔法，但很少）。 – patrickn 2012-02-06 22:11:39

這是不使用jQuery（和Django）的好理由。祝你的Bottle項目好運。這是一個有趣的框架。 – Alex 2012-02-07 04:11:47

使用Bottle（Python）的AJAX提交表單

回答

相關問題