Публикация информации о данных в CGI-скрипте с использованием javascript - PullRequest
Новая
       11

Публикация информации о данных в CGI-скрипте с использованием javascript

0 голосов
/ 02 мая 2020

У меня есть очень простая HTML Форма. Я хочу передать входные данные в сценарий CGI (Python), который сохранит их в таблицу mysql. 

<!DOCTYPE html>
<html>
<body>
<h2>Cadastro</h2>

<form name="cadastro" id="cadastro" action="/cgi-bin/cadastro.py" method="POST">
  <label for="nome">Nome completo:</label><br>
  <input type="text" id="nome" name="nome" required><br>
  <label for="mae">Nome completo da mãe:</label><br>
  <input type="text" id="mae" name="mae" required><br>
  <br><br>
  <input type="submit">
</form>
</body>
</html>

Форма отлично работает, и данные правильно сохраняются в таблице mysql .

Однако я хотел сделать «успешное» сообщение при нажатии кнопки «Отправить» вместо того, чтобы перенаправить его на скрипт cgi.

Я считаю, что самый простой способ сделать это - использовать javascript. Затем я попытался добавить это к коду: 

<script>
  const cadastro = document.getElementById("cadastro");

  cadastro.addEventListener("submit", (e) => {
    e.preventDefault();

    const request = new XMLHttpRequest();

    request.open("post", "/cgi-bin/cadastro.py")
    request.send();
  });
</script>

Вот сценарий python, в случае необходимости: 

print("Content-type: text/html\r\n\r\n")
import cgi, mysql.connector

db = mysql.connector.connect(
    host = "xxx",
    user = "yyy",
    password = "aaa",
    database = "bbb",
)

cadastro = cgi.FieldStorage()

def add_cliente(nome, mae):
    cursor = db.cursor()
    cursor.execute("INSERT INTO cadastro (nome, mae) VALUE (%s, %s)", (nome, mae))
    db.commit()
    return print(cursor.rowcount, "record inserted.")

add_cliente(cadastro.getvalue("nome"), cadastro.getvalue("mae"))

Однако пользовательский ввод сохраняется как NULL в таблице mysql. Может ли кто-нибудь помочь, пожалуйста?

1 Ответ

0 голосов
/ 03 мая 2020

Все сводится к тому, что скрипт не отправляет никаких данных, таким образом, значения NULL. Как уже упоминалось, скрипт cgi работал хорошо.

Вот пример javascript кода, извлеченного из здесь : 

window.addEventListener( "load", function () {
  function sendData() {
    const XHR = new XMLHttpRequest();

    // Bind the FormData object and the form element
    const FD = new FormData( form );

    // Define what happens on successful data submission
    XHR.addEventListener( "load", function(event) {
      alert( event.target.responseText );
    } );

    // Define what happens in case of error
    XHR.addEventListener( "error", function( event ) {
      alert( 'Oops! Something went wrong.' );
    } );

    // Set up our request
    XHR.open( "POST", "https://example.com/cors.php" );

    // The data sent is what the user provided in the form
    XHR.send( FD );
  }

  // Access the form element...
  const form = document.getElementById( "myForm" );

  // ...and take over its submit event.
  form.addEventListener( "submit", function ( event ) {
    event.preventDefault();

    sendData();
  } );
} );
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...