将输入字段中的文本提交到我的数据库，同时将其添加到我的列表中 - Submit text in input field to my database while adding it to my list

因此，我正在为网站添加一些功能，其中一个功能是，在这个窗口中，您可以将电子邮件地址输入到稍后将用于自动提醒电子邮件的列表中。

我已经完成了将电子邮件添加到列表本身的html和JS代码，但现在我还想将其添加到我的数据库中。

这是HTML和JS代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h1 style="align: center">Lägg till epost-addresser för alerts</h1>
    <input type="text"  id="alertinput"/>
    <button type="submit" id="btn_add">Add</button>
    <div>
        <ul class="alert_ul alertfont">
        </ul>
    </div>
</body>
</html>
<script>
var deleteimage = "<img class='dbtnmargin delbtn' src='img/deleteImg.png'></img>";
$('#btn_add').click(function(){
    $('.alert_ul').append($('<li>', {
    text: $('#alertinput').val()
    }));
    $(".alert_ul li:last").append(deleteimage);
    alertinput.value = '';  
});
$("ul").on("click", '.delbtn', function(e) {
    e.preventDefault();
    $(this).parent().remove();
});
</script>

我创建了另一个PHP文件，我知道我必须编写用于将邮件插入数据库的PHP代码，然后在单击提交按钮（btn_add）时以某种方式使用AJAX调用另一个PHP文件。

以下是其他文件的样子：

<?php
//insert email into DB
require "db/connect.php";
$selectedName = $_POST['postMail'];
if($update = $db->query(
    "INSERT INTO alert_email(mail)
    VALUES ('$selectedMail')"));
?>

这只是我认为它应该是什么样子的外壳。

我离这儿很远吗？如果能提供一些关于实际代码应该是什么样子的指导，那就太好了。

提前谢谢！

一种想法是应该清除输入，并使用PDO/绑定参数来确保安全，但另一种想法则是名称存在差异（$selectedName与$selectedMail）。它们应该是相同的：

$selectedMail= $_POST['postMail'];

if($update = $db->query(
    "INSERT INTO alert_email(mail)
    VALUES ('".$selectedMail."')"));

$selectedMail= $_POST['postMail'];
if(isset($_POST['postMail']){
$update = $db->query(
    "INSERT INTO alert_email(mail)
    VALUES ('".$selectedMail."')");
}

isset varrible，否则它会给你未定义的varrible。

好的，这里有几件事需要考虑。

首先，如果每次用户添加电子邮件时都调用PHP代码，那么如果用户单击删除按钮，也需要调用PHP代码——只需要使用一个删除条目的例程。然而，你不应该简单地做

'DELETE FROM alert_email WHERE mail="'.$selectedMail.'"'

因为如果用户意外地输入了两次电子邮件，并单击delete按钮删除了2个条目中的一个，那么上面的查询将删除数据库中的所有实例。因此，可以将查询限制为仅1个受影响的行。

另一个想法是在之前的javascript例程中检查重复的电子邮件地址。这会让你循环浏览alert_ul的所有条目，或者我的方法是简单地保留一个单独的所有输入电子邮件地址的数组（如果用户单击删除，不要忘记也从数组中删除电子邮件），在那里你可以比ul列表中更容易地检查电子邮件是否存在。

要使用ajax调用数据库脚本，只需在添加点击函数中调用即可：

$.post( "dbstuff.php", { postMail: $('#alertinput').val(), action: "add" }, function(data) {
 if (data == "OK") {
// wait for response and add it to the list
  $('.alert_ul').append($('<li>', {
  text: $('#alertinput').val()
  }));
  $(".alert_ul li:last").append(deleteimage);
  alertinput.value = '';  
} else { alert ('Error inserting in DB'); } // something went wrong, an alert is probably not the best way to handle this ...
} );

对于删除部分，你可以这样做：

e.preventDefault();
var theListItem = $(this).parent().html();
$.post( "dbstuff.php", { postMail: theListItem, action: "delete" }, function(data) {
 if (data == "OK") {
   $(this).parent().remove();
 } else { alert ('Error deleting'); }   
});

PHP文件（我称之为dbstuff.PHP）应该处理添加和删除操作。也正如之前发布的那样，净化你的数据！有很多聪明的方法可以做到这一点，但作为一个开始，一个简单的

$selectedMail = mysql_real_escape_string($_POST['postMail']);

有助于防止最坏的情况发生；-）

然后简单地切换动作变量

$ret = "FAIL";
if ($action == "add") {
  if($update = $db->query("INSERT INTO alert_email(mail) VALUES ('".$selectedMail."')")) $ret = "OK";
}
if ($action == "delete") {
  if($update = $db->query("DELETE FROM alert_email WHERE mail='".$selectedMail."' LIMIT 1") $ret = "OK";
}
return ($ret);

这是一个非常快速、肮脏的例子。实现更多的错误检查（比如设置变量）并可能给用户更详细的反馈是个好主意。

此外，我没有在javascript示例中实现阵列存储-我将把重复检查留给您；-）