2017-04-03 24 views
-1

私はこれを解決する方法を探しましたが、私はPythonの半分かjavascriptの半分しか見つけられませんでした。文字列を渡し、htmlページからpythonスクリプトを実行

が、私はそうのように、コマンドラインで実行するPythonスクリプト持っている:私は、ユーザーがWebページ上のテキストボックスに記入持つことができるようにしたい

$ python3 myscript.py inputString 

を、ボタンを押すと、テキストボックスから文字列を受け取ってpythonスクリプトを実行させます。

私はWGSIサーバとしてのpythonを実行するように言われてきた、そのようにAJAXを使用するために他の人に言われています

$.ajax({ 
    url: "/path/to/my/script.py", 
    data: "document.getElementById('textinputID').value, 
    success: function(response) {} 
}); 

が、私は正直にAJAXを理解していません。特にその呼び出しの「成功」部分です。そのjQueryだけを実行すると、エラーが発生します。これは、サーバーの半分を実行していないためです。

私はちょうど非常に混乱していて、誰かが両方の半分を一緒に説明できるなら、それは大好きです。

答えて

1

あなたが必要とするものは、javascriptでフロントエンドクライアントを作成し、バックエンドのPythonサーバーです。これはウェブ開発におけるかなり基本的なものです。

私はあなたのためにアプリの両面を作成しました。これは非常に基本的なことです。

まず、Flaskと呼ばれるPythonフレームワークを使用します。

> pip install flask

はその後、server.py

from flask import Flask, request, render_template 
app = Flask(__name__) 

@app.route("/script", methods=['POST']) 
def script(): 
    input_string = request.form['data'] 

    """ 
    Your script code here 
    """ 

    return "backend response" 

@app.route('/') 
def static_page(): 
    return render_template('index.html') 

if __name__ == "__main__": 
    app.run() 

input_stringというファイルを作成し、あなたの入力文字列を保持する変数です:あなたは、にこのように、それをインストールしています。その後

templateというフォルダを作成し、その中にファイルを追加するには、今、あなたはpython server.pyを実行することができ、あなたのブラウザでhttp://localhost:5000に行くことができindex.html

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <title>Test</title> 
</head> 
    <body> 
     <input id="textinputID" type="text" name="textinput"> 
     <script type="text/javascript"> 
      function sendMessage() { 
       $.ajax({ 
        method: 'POST', 
        url: "http://localhost:5000/script", 
        data: {'data': document.getElementById('textinputID').value}, 
        success: function(response) { 
         console.log(response) 
        }, 
        error: function(response) { 
         console.error(response) 
        } 
       }); 
      } 
     </script> 
     <button onclick="sendMessage()">Send</button> 
    </body> 
</html> 

と呼ばれます。

ルートにはindex.htmlがロードされます。 に送信すると、/scriptエンドポイントが使用されます。そこにスクリプトコードを挿入することができます。応答はそのメソッドで返される必要があります。

成功エラー機能は、コールバックです。これらの関数は、サーバーが応答を返すときにトリガーされます。サーバがHTTPステータス2xxを返す場合、成功関数が呼び出されます。 エラーエラー。

ajaxcallbacksについて詳しく読むことを強くおすすめします。詳しくは、Flask site tooをご覧ください。

+0

ありがとうございました!これはまさに私が探しているものです。また、すべてのことを説明し、いくつかの調査を行うことができるフォローアップリンクを追加することに非常に感謝します。私には片側だけを理解するのは難しいですが、今ではどちらももっとはっきりしていることがわかりました。 – Acoustic77

関連する問題