on
내일배움단 11일메이킹챌린지 6일차
내일배움단 11일메이킹챌린지 6일차
일단 테스트 페이지에서 선택된 문항의 데이터를 전달하고
그 값을 통해 결과 페이지를 도출하는데서 어려움을 겪었습니다.
이 부분을 form을 이용해 해결했습니다.
오늘은 해당 문제를 해결해 나간 과정을 기록하겠습니다.
[JavaScript]
rel="stylesheet">
내가 생각하는 환경은?
$(document).ready(function () {
$('#test1').show();
$('#test2').hide();
$('#test3').hide();
$('#test4').hide();
})
function one(value) {
var one = document.querySelector("input[name=one]")
one.value = value
$('#test1').hide();
$('#test2').show();
$('#test3').hide();
$('#test4').hide();
}
function two(value) {
var two = document.querySelector("input[name=two]")
two.value = value
$('#test1').hide();
$('#test2').hide();
$('#test3').show();
$('#test4').hide();
}
function three(value) {
var three = document.querySelector("input[name=three]")
three.value = value
$('#test1').hide();
$('#test2').hide();
$('#test3').hide();
$('#test4').show();
}
function four() {
var form = document.querySelector("#mbtiform")
form.submit();
}
북극곰들 너무 불쌍해..
어떻게 하면 북극곰이
행복해질까?
북금곰들은 이제 어떻게
살지? 어째서 이렇게 된
걸까..
해양오염이 나타난 원인에
대해서 더 살펴보자 원래
어떤 방식으로 해양오염을 해결했을까?
만약 나라면, 이렇게 할 수
있을 것 같아 해양오염을
해결하기 위한 새로운 방법을 찾아보자
일단 자료를 천천히
모으고어떻게 정리할 지
진행하는 걸 보면서 정하자
일단 자료 수집, 정리,
발표의 목차와 일정을 정하고 체계적으로 준비하자
앞으로 환경 문제를 해결하기 위해 어떤 활동에 참가
할 수 있는지 알아본다
앞으로 환경 문제를 해결하기 위해 어떤 후원을 할 수
있는지 알아본다
[Python]
from flask import Flask, render_template, jsonify, request
app = Flask(__name__)
@app.route('/')
def home():
return render_template('test.html')
@app.route('/test', methods=['GET'])
def listing():
one = request.args.get('one')
two = request.args.get('two')
three = request.args.get('three')
if one == "1" and two =="1":
return render_template("index1.html")
if two == "2" and three == "2":
return render_template("index2.html")
if two == "1" and one == "2":
return render_template("index3.html")
if two == "2" and three == "1":
return render_template("index4.html")
return jsonify({'msg':'GET 연결되었습니다!'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
@app.route('/test', methods=['GET'])
def listing():
one = request.args.get('one')
two = request.args.get('two')
three = request.args.get('three')
태그는 입력받은 값을 특정 url로 넘겨주는 역할을 합니다.
즉 form에 입력된 데이터를 한 번에 서버로 전송하고, 전송된 데이터를 웹서버에서 처리한 뒤
그 결과를 페이지에서 보여줍니다.
태그의 action 속성은 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시합니다.
여기서 python과 js는 method와 /test로 연결되어 있습니다.
그리고 태그는 태그를 구성하는 요소 중 하나입니다.
여기서 type은 hidden으로 그 값이 보이지 않게 처리되고
name 에서 one, two, three 의 value=" " 으로 일단 디폴트 되어 있습니다.
python에서 변수 one, two, three는 name 의 one, two, three를 받게 됩니다.
이제 name의 one, two, three 값이 어떻게 들어가는지 보겠습니다.
function one(value) {
var one = document.querySelector("input[name=one]")
one.value = value
$('#test1').hide();
$('#test2').show();
$('#test3').hide();
$('#test4').hide();
}
북극곰들 너무 불쌍해..
어떻게 하면 북극곰이행복해질까?
일단 onclick의 one, two, three 와 name(mbti from의 input)의 one, two, three는
one.value = value 로 연결이 됩니다.
.value 앞에 있는 one은 name의 one 이고,
오른쪽에 있는 value는 one(value)의 value로 oneclick의 value입니다.
이를 통해 onclick의 value값이 input[name=one] 값에 입력됩니다.
cf) var one = document.querySelector("input[name=one]")
해당 문서에서 "input[name=one]"을 찾아서 var one에 입력합니다.
@app.route('/test', methods=['GET'])
def listing():
one = request.args.get('one')
two = request.args.get('two')
three = request.args.get('three')
if one == "1" and two =="1":
return render_template("index1.html")
if two == "2" and three == "2":
return render_template("index2.html")
if two == "1" and one == "2":
return render_template("index3.html")
if two == "2" and three == "1":
return render_template("index4.html")
이후 위에서 받은 onclick 의 one, two, three에 value 값은 input[name=one] 에 입력되고
이 값은 python에서 새로운 one, two, three 값에 입력됩니다.
즉 onclick 의 value 변수가 python 의 one, two, three 변수로 입력됩니다.
이렇게 받은 값을 토대로 if 문을 구현하여, 해당 결과값에 맞는 html 파일로 연결시켜 줍니다.
function four() {
var form = document.querySelector("#mbtiform")
form.submit();
}
마지막으로 4번째 문항을 선택하면 #mbtiform을 실행하고
위에 설명한 행위들이 일어나게 됩니다.
from http://ojy4535.tistory.com/36 by ccl(A) rewrite - 2021-07-24 03:00:40