basictomonokai/index5.html

## index5.html
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
  <head>
<style>
#word {
  background-color: #ecf0f1;
  font-size: 1.5em;
  margin: 10px 0px;
  border-radius: 5px;
  padding: 5px;
}

#ansgbtn {
  background-color: #2ecc71;
  font-size: 1.5em;
  margin: 10px 0px;
}

#ansken {
  color: #2980b9;
｝

</style>

  </head>
  <body>

    <h1>{{ s }}</h1>

<hr>
<input type="text" name="word" id="word" size="30" placeholder="英単語を入力"><br>
<button id="ansgbtn">検索</button><br>
<div　id="ansarea">
【検索結果】
<div id="ansget">検索結果はここに表示されます</div>
</div>

    <script type="text/javascript">
      function ansg(){
        // URL(GET)を生成する
        var urlget="http://localhost:8188/test?get_value=";
        // 検索英単語をinput要素から取得
        urlget=urlget+document.getElementById('word').value;
        // JS側でも入力なしチェックする
        if (document.getElementById('word').value == "") {
          alert('検索する英単語を入力してください');
          return false;
        };

        // fetchでhttp getを発行
        fetch(urlget)
          .then(response => {
             // 応答を取得
             return response.text();
          })
          .then(body => {
             // 結果をdiv要素にセット
             document.getElementById('ansget').innerHTML = body;
        });


          console.log('fetchが呼び出されました');
      }

      // 検索ボタンの取得
      var p = document.getElementById('ansgbtn');

      // 検索ボタンのイベントリスナー設定
      p.addEventListener('click', ansg, false);
    </script>


  </body>
</html>

## server7.py
# server7.py
from flask import Flask, render_template, request

## 英単語検索関数
def click(kensaku):
  ## 入力チェック
  if kensaku == "":
    ## エラーメッセージセット
    msg="検索文字列が空です"
    return msg

  # 辞書ファイルを開く
  dic = open("ejdic-hand-utf8.txt","rt",encoding="utf-8")

  # 辞書ファイルをループ検索
  diccnt = 0
  result_area =""
  for line in dic:
    if line.startswith(kensaku):
      result_area = result_area+line+"<br><hr>"
      diccnt = diccnt+1

  # 辞書ファイルのクローズ
  dic.close()

  # 結果を返す

  result_top="<hr><span id=\"ansken\">"+str(diccnt)+"件の英単語がありました"+"</span><hr>"
  result_area=result_top+result_area
  return result_area

# Flaskの呼び出し
app = Flask(__name__)

# 初期画面の処理
@app.route('/')
def index():

    # 画面の初期設定(Jinja2)
    s = "英単語辞典 Python+Flask+Jinja2版"

    # 初期画面表示
    return render_template('index5.html', s=s)

# get postの処理(postは未使用)
@app.route('/test', methods=['GET', 'POST'])
def test():
    if request.method == 'GET':
        # 英単語検索関数をgetパラメータを引数で呼び出し
        ressub=click(request.args.get('get_value'))
        # 応答をセット（検索結果）
        res = ressub+"<br><br><br>以　上"
    elif request.method == 'POST':
        # 応答をセット（postパラメータ）
        res = request.form['post_value']

    return res

if __name__ == '__main__':
    app.debug = True
    app.run(host='0.0.0.0', port=8188)
	<!-- index.html -->
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<style>
	#word {
	background-color: #ecf0f1;
	font-size: 1.5em;
	margin: 10px 0px;
	border-radius: 5px;
	padding: 5px;
	}

	#ansgbtn {
	background-color: #2ecc71;
	font-size: 1.5em;
	margin: 10px 0px;
	}

	#ansken {
	color: #2980b9;
	｝

	</style>

	</head>
	<body>

	<h1>{{ s }}</h1>

	<hr>
	<input type="text" name="word" id="word" size="30" placeholder="英単語を入力"><br>
	<button id="ansgbtn">検索</button><br>
	<div　id="ansarea">
	【検索結果】
	<div id="ansget">検索結果はここに表示されます</div>
	</div>

	<script type="text/javascript">
	function ansg(){
	// URL(GET)を生成する
	var urlget="http://localhost:8188/test?get_value=";
	// 検索英単語をinput要素から取得
	urlget=urlget+document.getElementById('word').value;
	// JS側でも入力なしチェックする
	if (document.getElementById('word').value == "") {
	alert('検索する英単語を入力してください');
	return false;
	};

	// fetchでhttp getを発行
	fetch(urlget)
	.then(response => {
	// 応答を取得
	return response.text();
	})
	.then(body => {
	// 結果をdiv要素にセット
	document.getElementById('ansget').innerHTML = body;
	});


	console.log('fetchが呼び出されました');
	}

	// 検索ボタンの取得
	var p = document.getElementById('ansgbtn');

	// 検索ボタンのイベントリスナー設定
	p.addEventListener('click', ansg, false);
	</script>


	</body>
	</html>
	# server7.py
	from flask import Flask, render_template, request

	## 英単語検索関数
	def click(kensaku):
	## 入力チェック
	if kensaku == "":
	## エラーメッセージセット
	msg="検索文字列が空です"
	return msg

	# 辞書ファイルを開く
	dic = open("ejdic-hand-utf8.txt","rt",encoding="utf-8")

	# 辞書ファイルをループ検索
	diccnt = 0
	result_area =""
	for line in dic:
	if line.startswith(kensaku):
	result_area = result_area+line+"<br><hr>"
	diccnt = diccnt+1

	# 辞書ファイルのクローズ
	dic.close()

	# 結果を返す

	result_top="<hr><span id=\"ansken\">"+str(diccnt)+"件の英単語がありました"+"</span><hr>"
	result_area=result_top+result_area
	return result_area

	# Flaskの呼び出し
	app = Flask(__name__)

	# 初期画面の処理
	@app.route('/')
	def index():

	# 画面の初期設定(Jinja2)
	s = "英単語辞典 Python+Flask+Jinja2版"

	# 初期画面表示
	return render_template('index5.html', s=s)

	# get postの処理(postは未使用)
	@app.route('/test', methods=['GET', 'POST'])
	def test():
	if request.method == 'GET':
	# 英単語検索関数をgetパラメータを引数で呼び出し
	ressub=click(request.args.get('get_value'))
	# 応答をセット（検索結果）
	res = ressub+"<br><br><br>以　上"
	elif request.method == 'POST':
	# 応答をセット（postパラメータ）
	res = request.form['post_value']

	return res

	if __name__ == '__main__':
	app.debug = True
	app.run(host='0.0.0.0', port=8188)