ボトルを使用したAJAX送信フォーム（Python）

ボトルフレームワークを使用してAJAX通信を動作させる際に問題が発生しています。これは初めてAJAXを使用しているので、基本が間違っている可能性が高いです。うまくいけば、ボトル/ AJAXの達人はこの初心者を正しい方向に向けることができます。ここで私が使用しているコードは次のとおりです。ボトルを使用したAJAX送信フォーム（Python）

#!/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

いくつかの問題がここにあります。

Javascriptでは大文字と小文字が区別されます。 XMLHTTPRequestは、XMLHttpRequestである必要があります。 Javascriptコンソールでこれに関するエラーが発生しているはずです。
onReadyStateChangeは、となるはずです。onreadystatechangeです。
上記の2つの問題を解決した場合、AJAXコールは機能しますが、「あなたは何も入力しませんでした」というメッセージが表示されます。応答。これはGETを使用しているためです。フォームの値がPOSTメソッドを使用して転記されるようにコードを変更する必要があります。

また、jQueryを使用してAJAXを使用しているのはなぜですか？それはあなたの人生をはるかに簡単にするでしょう。 :)

出典

2012-02-06 21:52:43 Alex

ありがとう、私はそれが何か単純なものになることを知っていた。 jQueryを使用しない場合は、コーディングのこの段階で私は "魔法"に苛立ち、私が快適に移動する前に、どのように動作しているかを実際に確認する必要があります。したがって、ボトル（私はここでも魔法がたくさんありますが、最小限のもの）を使用しています。 – patrickn

これは、jQuery（とDjango）を使わないのがよい理由です。あなたのBottleプロジェクトに幸運を祈る。これは楽しいフレームワークです。 – Alex

ボトルを使用したAJAX送信フォーム（Python）

答えて

関連する問題