简体   繁体   English

如何在数据库中存储文本框的值?

[英]How to store the value of a text box in a database?

What I want to achieve: In a HTML window I click a button, then a popup window opens containing a text box and a submit button.我想要实现的目标:在 HTML 窗口中,我单击一个按钮,然后会打开一个包含文本框和提交按钮的弹出窗口。 There I enter a text into the text box, and after I click the submit button the text should be stored using SQl in a database.在那里我在文本框中输入一个文本,在我单击提交按钮后,文本应该使用 SQl 存储在数据库中。

I have code (see below)to get a text box value, and call another script to store the value in a database.我有代码(见下文)来获取文本框值,并调用另一个脚本将值存储在数据库中。

My AJAX code我的 AJAX 代码

$(document).ready(function() {
$("#sub").click(function() {
    $.ajax({
        type: "POST",
        url: "jqueryphp.php",
        data: {
            val: $("#val").val()
        },
        success: function(result) {
            $("div").html(result);
        }
    });
});
});​

HTML form code HTML 表单代码

<input type="text" name="val[text]" id="val"/><br>
<input type="button" name="sub"  value="submit" id="sub"/>

How can I put these pieces together?我怎样才能把这些碎片放在一起?

You can use a HTML form like this:您可以使用这样的 HTML 表单:

<html>

<head>
  <script type="text/javascript"
    src="http://code.jquery.com/jquery-1.10.2.js"> </script>
  <script type="text/javascript"
    src="addEntryFormAjax.js"> </script>
</head>

<body>
  <form id="form">
    <input type="text" id="blogText" name="blogText" size="40" />
    <input type="submit" id="submit" value="submit"/>
  </form>

  <div id="result">
    None
  </div>
</body>

The HTML form uses JavaScript to attach a submit handler ( addEntryFormAjax.js ): HTML 表单使用 JavaScript 附加提交处理程序 ( addEntryFormAjax.js ):

$(document).ready(function() {
    $("#form").submit(function() {
      doAjax();

      // Prevent normal form submit
      return false;
    });
});

function doAjax() {
    $("#result").html("<span>Calling ...</span>");

    $.ajax({
        type: "POST",

        url: "addEntryAjaxPdo.php",

        dataType: "html",

        data: {
          blogText: $("#blogText").val()
        },

        success: function(result) {
          $("#result").html(result);
        }
    });
}

If the submit button is pressed, the submit handler uses an AJAX call to the PHP script addEntryAjaxPdo.php which inserts data into the database:如果提交按钮被按下,提交处理程序会使用 AJAX 调用 PHP 脚本addEntryAjaxPdo.php ,该脚本将数据插入到数据库中:

<div>

<?php

// Sleep 3s, simulate a long running request
sleep(3);

$host = "localhost";
$db = "sandbox";
$user = "dev";
$pass = "dev";

$conn = new PDO("mysql:host=$host;dbname=$db", $user, $pass);

$stmt =
  $conn->prepare(
    "insert into blog (blogText, blogTimestamp) values (:blogText, now())");
$stmt->bindParam(':blogText', $_REQUEST['blogText']);
$stmt->execute();

$sql = "select last_insert_id()";
$query = $conn->query($sql);
$row = $query->fetch(PDO::FETCH_ASSOC);
echo "Inserted <em>" . $_REQUEST['blogText'] . "</em> into blog, id is " 
  . $row['last_insert_id()'];

?>

</div>

The state/result of the AJAX call is shown in the HTML page in the div element. AJAX 调用的状态/结果显示在 HTML 页面的div元素中。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM