再會。我對編程真的很陌生（3 個月），我正在嘗試為我的課程最終專案添加最后一個功能。在我的 html 頁面中，我有 5 個選擇容器，第一個容器在我的 app.py 中有來自元組物件的資料，其余 4 個選項資料來自 sqlite3 資料庫查詢。我希望這些選項相互依賴，無論用戶首先選擇哪個選項。為了讓您更多地了解我在說什么，所有選項都與武器型別相關（這是一個用于管理在線游戲庫存的網路應用程式），這個“型別”列存在于查詢中使用的每個表中，遠程武器表示為“1”，近戰武器表示為“2”，兩種型別均表示為“0”。那么我是如何理解它的，我需要在選擇一個選項后發出一個 json 請求，并將其與新的查詢結果一起回傳到 html，以便使用 javascript 處理新資料？但是接下來，當將選擇新選項并減少變體時……我完全迷失在這里，因為我的 javascript 經驗僅適用于引導程式（復制/粘貼）……我希望我清楚地解釋了所有內容，并且非常感謝一些例子如何做到這一點。感謝您的時間。
我的python代碼：
@app.route("/add", methods=["GET", "POST"])
@login_required
def add():
# assigning user_id to session
user_id = session["user_id"]
# this will be used for future dynamic change feature
weapon_type = ("-1", "1")
if request.method == "POST":
# assigning user's input
wtype = request.form.get("wtype")
wname = request.form.get("wname")
main_p = request.form.get("main_p")
major_p = request.form.get("major_p")
minor_p = request.form.get("minor_p")
# check if input fields are blank or not valid
if not wtype or wtype not in weapon_type:
return apology("Invalid type")
if not wname:
return apology("Invalid type")
if not main_p:
return apology("Invalid type")
# adding new weapon into users_weapons table
db.execute("INSERT INTO user_weapons (user_id, weapon_id, main_id, major_id, minor_id) VALUES(?, ?, ?, ?, ?)", user_id, wname, main_p, major_p, minor_p)
return redirect("/inventory")
else:
# adding options for select forms
weapons = db.execute("SELECT id, name FROM weapons")
mains = db.execute("SELECT id, name FROM mainp")
majors = db.execute("SELECT id, description FROM majorp")
minors = db.execute("SELECT id, description FROM minorp")
return render_template("add.html", weapons=weapons, mains=mains, majors=majors, minors=minors)
我的html代碼：
{% block main %}
<form action="/add" method="post">
<div class="form-group">
<select class="form-control col-md-4 bg-dark text-success" name="wtype">
<option disabled selected>Weapon Type</option>
<option value="-1">Melee</option>
<option value="1">Ranged</option>
</select>
<br>
<br>
<select class="form-control col-md-4 bg-dark text-success" name="wname">
<option disabled selected>Weapon Name</option>
{% for weapon in weapons %}
<option value="{{ weapon["id"] }}"> {{ weapon["name"] }} </option>
{% endfor %}
</select>
<br>
<br>
<select class="form-control col-md-4 bg-dark text-success" name="main_p">
<option disabled selected>Main Prefix *</option>
{% for main in mains %}
<option value="{{ main["id"] }}"> {{ main["name"] }} </option>
{% endfor %}
</select>
<br>
<br>
<select class="form-control col-md-4 bg-dark text-success" name="major_p">
<option disabled selected>Major Prefix **</option>
{% for major in majors %}
<option value="{{ major["id"] }}"> {{ major["description"] }} </option>
{% endfor %}
</select>
<br>
<br>
<select class="form-control col-md-4 bg-dark text-success" name="minor_p">
<option disabled selected>Minor Prefix ***</option>
{% for minor in minors %}
<option value="{{ minor["id"] }}"> {{ minor["description"] }} </option>
{% endfor %}
</select>
</div>
<br>
<button class="btn btn-outline-dark btn-lg" type="submit">Add Item</button>
</form>
{% endblock %}
uj5u.com熱心網友回復：
因此，在我朋友的幫助下（向 Scraelos 大喊大叫！:)，我們能夠使用 Flask 和 Jquery 的 Jsonify 功能解決這個問題。這與我最初想要實作的方法略有不同，但它更適合我的網路應用程式的通用目的。
（通過這樣做，我能夠消除通過“/add”路由的 GET 方法填充選擇選項的需要）
蟒蛇代碼：
@app.route("/options")
@login_required
def options():
wtype = request.args.get('wtype')
weapons = db.execute("SELECT id, name FROM weapons WHERE type = ?", wtype)
mains = db.execute("SELECT id, name FROM mainp WHERE type = ? OR type = 0", wtype)
majors = db.execute("SELECT id, description FROM majorp WHERE type = ? OR type = 0", wtype)
minors = db.execute("SELECT id, description FROM minorp WHERE type = ? OR type = 0", wtype)
return jsonify(weapons=weapons, mains=mains, majors=majors, minors=minors)
javascript代碼：
$(document).ready(function() {
// first we hide opions 2-5 and button
$('#wname').hide();
$('#main_p').hide();
$('#major_p').hide();
$('#minor_p').hide();
$('#submitbtn').hide();
// when 1st available option is changed, we get JSON from "/options"
$('#wtype').change(function(){
$.getJSON('/options', {
wtype: $('#wtype').val()
// if request successful process data
}).done(function(data) {
// remeber selected options for later use
mainp=$('#main_p').val();
majorp=$('#major_p').val();
minorp=$('#minor_p').val();
// empty options for now...
$('#wname').empty();
$('#main_p').empty();
$('#major_p').empty();
$('#minor_p').empty();
// appending placeholder options
$('#wname').append($('<option disabled selected>Weapon Name</option>'));
$('#main_p').append($('<option disabled selected>Main Prefix ☆</option>'));
$('#major_p').append($('<option disabled selected>Major Prefix ☆☆</option>'));
$('#minor_p').append($('<option disabled selected>Minor Prefix ☆☆☆</option>'));
// appending real options available for chosen type trough itteration
$.each(data.weapons, function(key, val) {
$('#wname').append($('<option>').text(val.name).attr('value', val.id));
});
$.each(data.mains, function(key, val) {
$('#main_p').append($('<option>').text(val.name).attr('value', val.id));
});
$.each(data.majors, function(key, val) {
$('#major_p').append($('<option>').text(val.description).attr('value', val.id));
});
$.each(data.minors, function(key, val) {
$('#minor_p').append($('<option>').text(val.description).attr('value', val.id));
});
// after all new options were added to selection, this "if" condition checks if previously saved option is in new options list
if ($("#main_p option[value=" mainp "]").length > 0){
// if true, select this option
$('#main_p').val(mainp).change();
}
if ($("#major_p option[value=" majorp "]").length > 0){
$('#major_p').val(majorp).change();
}
if ($("#minor_p option[value=" minorp "]").length > 0){
$('#minor_p').val(minorp).change();
}
// make select options and button fadeIn from "hide"
$('#wname').fadeIn();
$('#main_p').fadeIn();
$('#major_p').fadeIn();
$('#minor_p').fadeIn();
$('#submitbtn').fadeIn();
})
});
});
畢竟 HTML 是這樣的：
{% extends "layout.html" %}
{% block title %}
Add
{% endblock %}
{% block main %}
<form action="/add" method="post">
<div class="form-group">
<select class="form-control col-md-4 bg-dark text-success" name="wtype" id="wtype">
<option disabled selected>Weapon Type</option>
<option value="-1">Melee</option>
<option value="1">Ranged</option>
</select>
<br>
<br>
<select class="form-control col-md-4 bg-dark text-success" name="wname" id="wname">
<!-- I was able to remove below syntax, by performing table select population through Jquery code in fetch.js
<option disabled selected>Weapon Name</option>
{% for weapon in weapons %}
<option value="{{ weapon["id"] }}"> {{ weapon["name"] }} </option>
{% endfor %}
-->
</select>
<br>
<br>
<select class="form-control col-md-4 bg-dark text-success" name="main_p" id="main_p"></select>
<br>
<br>
<select class="form-control col-md-4 bg-dark text-success" name="major_p" id="major_p"></select>
<br>
<br>
<select class="form-control col-md-4 bg-dark text-success" name="minor_p" id="minor_p"></select>
</div>
<br>
<button class="btn btn-outline-dark btn-lg" type="submit" id="submitbtn">Add Item</button>
</form>
<script src="/static/fetch.js"></script>
{% endblock %}
也許有人會發現這個解決方案很有用。和平！:)
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/394257.html
標籤：javascript Python sqlite 烧瓶