질문

내가 정확히하고 싶은 것은 다음과 같습니다.사용자가 원하는 행 수를 추가하고 정보를 채울 수 있도록하고 싶습니다. 제출 button을 클릭 한 후 테이블에 입력 된 데이터는 플라스크로 처리되어야합니다. 클라이언트 측에서 내 서버로 커스텀 테이블을 가져 오는 방법은 무엇입니까? 코드 데모에 대한 답변이 감사합니다 (나는 초보자입니다).

답변1

다음은 3 개의 열이있는 테이블의 예입니다. 사용자는 필요한만큼 많은 행을 동적으로 추가 할 수 있습니다. 그런 다음 제출 button을 클릭하면 데이터를 수집하여 서버로 보냅니다. 여기에 클라이언트 측 코드가 있습니다. 잘 보이도록 몇 가지 스타일.

$("#add_rows").click(function() {
      // each click on the `+` button adds a row to the table
      $("#data_container tbody").append(`<tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>`);
    });
    $("#submit_rows").click(function() {
      // `obj` for storing the inputs, and the `n` to make unrepeated keys
      var obj = {}, n = 0;
      // loop over the rows
      $("#data_container tbody tr").each(function(ind, tr) {
        // add an array to the object
        obj[`r${n}`] = [];
        // loop over the inputs of this row
        $(this).find("input").each(function(ind, input) {
          // add the value of the input to the array and make sure to remove any semicolon since
          // we will use it to seperate the inputs
          var val = input.value.replace(/;/g, "");
          obj[`r${n}`].push(val);
        });
        // no need for the array, just join it to a string of values separated by semicolons
        obj[`r${n}`] = obj[`r${n}`].join(";");
        // increase the value of `n`
        n++;
      });
      // log the object to the console so you can see what we are sending
      console.log(obj);
      // send the data to the server, see the console for a logging message for success
      $.post("http://127.0.0.1:3000", obj, (data, status) => console.log("Status: " + status));
    });

* {
  box-sizing: border-box;
}
#data_container {
  border: 1px solid green;
  width: 500px;
  border-radius: 5px;
  padding: 3px;
  background: radial-gradient(lightgreen, green);
  position: relative;
  font-family: monospace;
  font-size: 24px;
}
#data_container th {
  background-color: lightgreen;
  color: white;
  border-radius: 5px 5px 0 0;
}
#data_container td, th {
  width: 33%;
  height: 40px;
  border: 1px solid green;
}
#data_container input {
  width: 100%;
  height: 100%;
  border-color: #aaa;
  font-size: 24px;
}
#add_rows, #submit_rows {
  height: 50px;
  position: absolute;
  background-color: lightgreen;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: yellow;
}
#add_rows {
  width: 50px;
  bottom: -25px;
  right: -25px;
  border-radius: 50%;
  font-size: 48px;
}
#submit_rows {
  width: 100%;
  bottom: -30px;
  left: 0;
  border-bottom-left-radius: 50%;
  z-index: -1;
  font-variant: small-caps;
  letter-spacing: 10px;
  align-items: flex-end;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="data_container">
  <form>
    <table>
      <thead>
        <tr><th>Name</th><th>Job</th><th>Country</th></tr>
      </thead>
      <tbody>
        <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
      </tbody>
    </table>
  </form>
  <button id="submit_rows">Submit</button>
  <button id="add_rows">+</button>
</div>

Expand snippet

그리고 여기 백엔드 코드가 있습니다. Flask 를 사용하기 때문에 저도 똑같이했습니다.

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def get_table_data():
  # if the method is POST then the user is submitting a form otherwise he's just requesting the rendered document page
  if request.method == "POST":
    print("Posting data")
    for input in request.form:
      row = request.form[input].split(";")
      print("--------------------------")
      print("Name: " + row[0]);
      print("Job: " + row[1]);
      print("Country " + row[2]);
      # I'm just printing it but you can do whatever you want with the data
  # always the same page only for testing
  return render_template("Table_send.html")

app.run(host = '127.0.0.1', port = 3000, debug = False)

Flask에 익숙하지 않은 경우 다음 사항을 알아야합니다.

서버용 python script를 사용하여 동일한 디렉토리에 "templates"라는 폴더를 만듭니다.
script를 정상적으로 실행하십시오. 예를 들어 python server.pyFlask run ...및 환경 변수 추가가 필요 없습니다.
계속 배우고 즐겁게 코딩하세요 :)

클라이언트 측에서 3 개의 행으로 테스트

여기에 이미지 설명 입력

백엔드 측에서 데이터 가져오기 및 print

Posting data
--------------------------
Name: Bobby
Job: Programmer
Country Canada
--------------------------
Name: Maria
Job: Designer
Country USA
--------------------------
Name: Michael
Job: Instructor
Country Germany