使用 javascript 将数据信息发布到 CGI 脚本答案

【问题标题】：Post data info to CGI script using javascript使用 javascript 将数据信息发布到 CGI 脚本
【发布时间】：2020-05-03 05:58:44
【问题描述】：

我有这个非常简单的 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"))

但是，用户输入在 mysql 表中存储为 NULL。有人可以帮忙吗？

【问题讨论】：

检查是否有值，如果 cadastro .has_key("name") 和 cadastro .has_key("mae"):
你的意思是检查表是否有列“name”和“mae”？如果是这样，它确实如此。第一个代码效果很好。它将数据正确地发送到表中。当我使用javascript发布时，它没有。
不，我的意思是来自 cgi 脚本的值 Ok cmets 不好读，但我的其余评论是代码
我相信您的意思是您希望我为cadastro.getvalue("nome") 和cadastro.getvalue("mae") 设置变量并使用.has_key 检查它们是否返回True。正确的？如果是这样，我相信他们是，因为直接从 HTML 表单（第一个代码块）发布是有效的。
无论如何都要检查是否有值，因为您的 mysql 代码有效（您可以添加错误处理参见dev.mysql.com/doc/connector-python/en/… 所以变量 mae 和 nome 必须为空，这就是为什么我说你应该检查一下

标签： javascript python html mysql

【解决方案1】：

归结为脚本没有发送任何数据，因此是 NULL 值。如前所述，cgi 脚本运行良好。

这是一个示例 javascript 代码，摘自 here:

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();
  } );
} );

【讨论】：