ウェブページのURLから別のページを表示させる

WebページにあるURLをクリックしたら特定のページに遷移したいです。

以下はやりたいことのイメージ図です。わかりにくかったらごめんなさい。

やりたいことはウェブページに無数に表示されるURLから特定のURLをクリックすると、そのページに遷移して、書誌のより詳細な情報を表示させるというものです。そのために選択されたURLの値を以下に示すコードの3個目の@app.routeで取得したいのですが、うまくいきません。おそらくJavascriptを使うのでしょうが、Javascriptは全然わからないので教えて下さらないでしょうか。。。大学の課題です。。。。。

実行したコードは以下の通りです。

Python
1import os
2import sqlite3
3from flask import Flask, render_template, escape, request
4from flask_ngrok import run_with_ngrok
5
6os.environ["FLASK_ENV"] = "development"
7os.chdir("/content/gdrive/My Drive/cje1s1911509/")
8
9app = Flask(__name__)
10run_with_ngrok(app)
11
12@app.route("/e5-1.html")
13def e44():
14  return render_template("e5-1.html")
15
16
17@app.route("/showname", methods = ["POST"])
18def sample():
19  i = 0
20  con = sqlite3.connect("/content/gdrive/My Drive/cje1s1911509/test.db")
21  cur = con.cursor()
22  key1 = request.form["key1"]
23  key2 = request.form["key2"]
24  key3 = request.form["key3"]
25  key4 = request.form["key4"]
26  key5 = request.form["key5"]
27  key6 = request.form["key6"]
28  key7 = request.form["key7"]
29  andor = request.form["andor"]
30  if not key1 == "":
31    s = "<!DOCTYPE html>\n"
32    s += "<html><body>"
33    for row in cur.execute('select * from sample16 where ' + keycon(key1)):
34      s += "<p>i/{}/{}/<a id = "sample" href= '/" + str(i) + "detail.html'>詳細を表示</a></p\>".format(escape(row[1]), escape(row[2]))
35      i +=1
36    return s
37    s += "</body></html>"
38    con.close()
39  else:
40    s = "<!DOCTYPE html>\n"
41    s += "<html><body>"
42    for row in cur.execute('select * from sample16 where ' + fieldsearch(key2,key3,key4,key5,key6,key7,andor)):
43      s += "<p>/{}/{}/<a id = "sample"  href= '/" + str(i) + "detail.html'>詳細を表示</a></p\>".format(escape(row[1]), escape(row[2]))
44      i +=1
45    return s
46    s += "</body></html>"
47    con.close()
48def link():
49
50
51@app.route('/' + str(i) + 'detail.html')
52def detail():
53  s = "<!DOCTYPE html>\n"
54  s += "<html><body>"
55  #for listvalues in list[i]:
56    #s += "<p>listvalues</p>"
57  return s
58  s += "</body></html>"
59
60if __name__ == "__main__":
61  app.run()

発生している問題・エラーメッセージ

エラーメッセージは、name 'i' is not definedです。
3個目の@app.routeで取得でurlをうまく取得できません。

行動規範の内容に同意します

回答1件

クイックスタート — Flask v0.5.1 documentationを参考にさせていただきました。

変数ルール

現代のWebアプリケーションは非常に単純明快なURLを持っているため、人々はURLを覚えることができます。これはネットワーク接続の遅い携帯デバイスから利用されるアプリケーションにとって非常に有用なことです。もしユーザーがインデックスページを経由せずに直接望んだページにいけるなら、ユーザーはそのページに繰り返し好んで訪れることになるでしょう。
URLに変数部分を付け加えるために、 <variable_name> として特別にセクションをマーキングすることができます。そのような部分はファンクションへのキーワードアーギュメントとして略記されます。 converter:variable_name でルールを特定することにより、コンバーターを特定することもできます。以下に例を示します。
※省略
以下のコンバーターが存在することが分かります。


int	整数を受け入れる
float	int と同様、浮動小数点を受け入れる
path	デフォルト同様だが、スラッシュも受け入れる

※表示が崩れてしまうので、一部省略させていただきました。

Python
1#省略
2@app.route('/<int:i>detail.html')
3def detail(i):
4  s = "<!DOCTYPE html>\n"
5  s += "<html><body>"
6  #for listvalues in list[i]:
7    #s += "<p>listvalues</p>"
8  return s
9  s += "</body></html>"
10#省略