回答編集履歴

1

追記分に回答

2019/10/25 11:22

投稿

FiroProchainezo
FiroProchainezo

スコア2392

test CHANGED
@@ -85,3 +85,215 @@
85
85
 
86
86
 
87
87
  何がしたいのかよくわからなかったのでこのくらいしか回答できませんが、index.html(/)をfetchを使って遷移せずに書き換えたいのか、画面遷移で(POSTして)表示を変えたいのかを明確にすればもう少し変わると思います。
88
+
89
+
90
+
91
+
92
+
93
+ ## 追記(2019/10/25 20:21)
94
+
95
+
96
+
97
+ 最初に、すべてに指摘は入れているわけではないので、指摘されていないところが問題無いとは思わないでください。
98
+
99
+
100
+
101
+
102
+
103
+ > 検索フォームに入力されたら、大文字小文字問わず部分一致で該当するcityを持つデータのnameを取得し、画面遷移で(POSTして)表示を変えたいです。
104
+
105
+
106
+
107
+ 画面遷移してで良いなら、formのpostにsearch_venuesを指定(`<form method="post" action="{{ url_for('search_venues') }}">`)し(フォームを2つに分けました)、
108
+
109
+ index.htmlではなく、適当に`search.html`等を作成し、
110
+
111
+ app.pyのsearch_venuesの処理を変更して、render_templateを返すように
112
+
113
+ すればOKと思います。
114
+
115
+
116
+
117
+
118
+
119
+ ### index.html
120
+
121
+ ```html
122
+
123
+ <form method="post" action="/todos/create">
124
+
125
+ <h4>name</h4>
126
+
127
+ <input type= "text" name="name" />
128
+
129
+ <h4>city</h4>
130
+
131
+ <input type= "text" name="city" />
132
+
133
+ <input type= "submit" value="Create" />
134
+
135
+ </form>
136
+
137
+ <form method="post" action="{{ url_for('search_venues') }}">
138
+
139
+ <h4>search box</h4>
140
+
141
+ <input type="text" name="search_term" />
142
+
143
+ <input type= "submit" value="Search" />
144
+
145
+ </form>
146
+
147
+
148
+
149
+ ```
150
+
151
+
152
+
153
+ ### search.html
154
+
155
+ ```html
156
+
157
+ <!DOCTYPE html>
158
+
159
+ <html lang="ja">
160
+
161
+ <head>
162
+
163
+ <meta charset="UTF-8">
164
+
165
+ <title>Title</title>
166
+
167
+ </head>
168
+
169
+ <body>
170
+
171
+ <div>
172
+
173
+ <ul>
174
+
175
+ {% for d in ret %}
176
+
177
+ <li>{{d.name}} {{ d.city }}</li>
178
+
179
+ {% endfor %}
180
+
181
+ </ul>
182
+
183
+ </div>
184
+
185
+ </body>
186
+
187
+ </html>
188
+
189
+ ```
190
+
191
+
192
+
193
+ ### search_venues
194
+
195
+ ```python
196
+
197
+ @app.route('/todos/search', methods=['POST'])
198
+
199
+ def search_venues():
200
+
201
+ search_term = request.form.get('search_term')
202
+
203
+ ret = db.session.query(Todo).filter(Todo.city.contains(search_term)).all()
204
+
205
+ return render_template('search.html', ret=ret)
206
+
207
+ ```
208
+
209
+
210
+
211
+
212
+
213
+ ## jinja2とjavascriptについて
214
+
215
+
216
+
217
+ > search_venuesの戻り値がrender_template
218
+
219
+ > に関して、javascriptとpythonのjinja2で表示処理のちがいがよくわかっていないのですが
220
+
221
+ > 検索しても該当するページを見つけられていない状況です。
222
+
223
+
224
+
225
+ pythonとjinja2はサーバ側で動作します。
226
+
227
+
228
+
229
+ javascriptは、サーバ側が処理し終わって、ブラウザにすべてが表示されたあとに動作します。(必ずではありませんが)
230
+
231
+
232
+
233
+ ブラウザでアクセス(localhost:5000)したら以下のような流れだと思ってください。
234
+
235
+
236
+
237
+ 1. ブラウザで`http://localhost:5000/`を開く
238
+
239
+ 2. app.pyのindexが動作する。
240
+
241
+ 3. render_templateでindex.htmlが呼ばれる。
242
+
243
+ 4. index.htmlのマスタッシュ記法{{}}部分をpython(jinja2)が処理する。
244
+
245
+ 5. index.htmlがブラウザに表示される。({{}}は残っていない)
246
+
247
+ 6. index.htmlのscriptに記載されている部分が動作する。(このソースでは動作する場所がありませんが)
248
+
249
+
250
+
251
+ fetchの結果を{{}}に反映しようとしているのは、処理している部分が違うので無理です。
252
+
253
+ Chromeでlocalhost:5000を表示し、開発者ツール(F12)を表示してみてください。(Sourcesタブの左側top->localhost:5000->)(index)
254
+
255
+ {{}}で囲まれたものはSorucesに見当たらないはずです。
256
+
257
+
258
+
259
+ python(flask, jinja2)はpython, javascriptはjavascriptで処理する必要があります。
260
+
261
+
262
+
263
+ ```html
264
+
265
+ # これは無理です。
266
+
267
+ {% for name in results %}
268
+
269
+ <li>
270
+
271
+ <h5>{{ todo.name }}</h5> <!-- 検索結果をページにプリント -->
272
+
273
+ </li>
274
+
275
+ {% endfor %}
276
+
277
+ ```
278
+
279
+
280
+
281
+
282
+
283
+ #### 余談
284
+
285
+
286
+
287
+ index.htmlに以下の記述がありますが、Javascirptの記述として正しく無いので削除した方が良いです。
288
+
289
+
290
+
291
+ ```html
292
+
293
+ //return the serched data
294
+
295
+ SQL
296
+
297
+ SELECT city from table where LIKE search_term;
298
+
299
+ ```