2016-04-27 7 views
0

私は変数 "距離"を返すpythonファイルに取り組んでいて、私は自分のウェブページに値を入れることができるjavascriptファイルに送ります。PythonからJSONデータをjavascriptに戻すにはどうすればよいですか?

私の問題は、pythonからjavascriptへの値の送信方法がわかりません。 PythonファイルをJSON形式で返すようにしてから、ajax-requestを作成する必要があると聞いたことがありますが、どこでもそれを行う方法はわかりません。

私の質問は、JSONデータをjavascriptで取得するための接続を設定するにはどうすればいいですか?誰かがコードを使って私に見せてくれたら、私は本当に謝るだろう。私はPythonとjavascriptの両方でとても新しい。私は距離センサーを備えたRaspberryPiからデータを得ている。私のPythonのコードは次のとおりです。

import RPi.GPIO as GPIO 
import time 
import io, json 

GPIO.setmode(GPIO.BCM) 
TRIG = 14 
ECHO = 15 

GPIO.setup(TRIG,GPIO.OUT) 
GPIO.setup(ECHO,GPIO.IN) 

revers = 1 

while revers == 1: 

    GPIO.output(TRIG,0) 
    time.sleep(0.5) 

    GPIO.output(TRIG,1) 
    time.sleep(0.00001) 
    GPIO.output(TRIG,0) 

    while GPIO.input(ECHO)==0: 
     pulse_start = time.time() 

    while GPIO.input(ECHO)==1: 
     pulse_end = time.time() 

    pulse_duration = pulse_end - pulse_start 
    distance = pulse_duration * 17150 
GPIO.cleanup() 

私はJavaScriptで何かを書くことはまだないんだけど、私はAJAX呼び出しを作る方法を知らないが、私の目標は、JSON形式に可変の距離を作ることであるというだけの理由私のウェブページでそれを取得してください。

+0

詳細はここにあります。どのような "pythonfile"について話していますか?おそらく、これはPythonのWebフレームワークのようなものですが、あなたはこれまでにどのコードを持っているのかについては言及していません。 –

+0

既にコード化したコードを投稿する –

+0

私はこのため申し訳ありません、私はstackoverflowを使用することに新しいです。私は今私の投稿を編集していますが、これまでのコードを使っています –

答えて

2

あなたのサーバー上のpythonプログラムは任意の形式で任意の値を返すことができますが、jsonは便利な形式です。これはPythonプログラムとjavascriptの両方で簡単に処理できます。

あなたのJavaScriptは、サーバーにリクエストを送信する必要があります。要求は、Pythonファイルを取得することを指定します。ユーザーがボタンをクリックするようなイベントに反応して、javascriptリクエストが送信されることに注意してください。

pythonプログラムは、サーバーのディレクトリ構造のどこかに存在します。サーバーが正しく設定されていれば、pythonファイルの要求を受け取ったときに、pythonファイルのテキストを返す代わりに、サーバーはpythonプログラムを実行し、pythonプログラムの出力を返します。

ajax(つまりjavascript)リクエストを作成する最も簡単な方法はjqueryです。 jqueryでajaxリクエストを作成する方法については、文字通り10,000のチュートリアル、ブログなどがあります。ここでは1である。ここでは

http://www.tutorialspoint.com/jquery/jquery-ajax.htm

は、jQueryのドキュメントで、関連する情報です:

https://api.jquery.com/jquery.get/

私はPythonとJavaScriptの両方に非常に新しいです。..

あなたが望むプログラムは、あまりにも複雑すぎるでしょう。ここで

はAJAXの例である:

page.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Web Page</title> 
</head> 

<body> 
    <p>Hello</p> 
    <button id="my_button" type="button">Click me</button> 
    <div id="ajax_results"></div> 

<!-- Download jquery library: --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

<!-- My jquery code: --> 
<script> 
    $("#my_button").on('click', function() { 
    $.get("http://localhost:8080/cgi-bin/my_prog.py", function(data) { 
     $("#ajax_results").text(data); 
    }) 
    }); 
</script> 

</body> 
</html> 

私は私のブラウザで次のURLを使って自分のローカルサーバに要求を行います。

http://localhost:8080/page.html 

ました私のブラウザでpage.htmlを読み込みます。ページが読み込まれたように、私のjqueryのコードは、ボタンにonclickのハンドラを追加した、実行:

その後
$("#my_button").on('click', function() {.... 

ボタンがクリックされた場合、関数が実行されます。

次のPythonプログラムは、私のローカルサーバ上のディレクトリにあります。

my_prog.py

#!/usr/bin/env python3.4 

print("Content-Type: text/html\n\n") 
distance = 10 
print(distance) #This is the body of the response 

私は、Webページに表示されたボタンをクリックすると、jqueryのコードを送信しますファイルmy_prog.pyのためのサーバーへの要求:

$.get("http://localhost:8080/cgi-bin/my_prog.py", .... 

私のサーバがそのファイルを実行するように設定されている - というよりもretur nファイルのテキスト - サーバーはプログラムの出力を応答として返します。

function(data) { 
    $("#ajax_results").text(data); 
}) 

引数として応答の本体を通る:

jqueryのコードは、サーバからの応答を受信し、jQueryのは、以下の関数を呼び出します。この関数は、ID「ajax_results」を持つhtmlタグに応答dataの本文を挿入します。レスポンスの本文は文字列「10」であるため、Webページには10が表示されます。

関連する問題