将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中

时间:2016-05-18 10:52:15

标签: javascript php jquery html ajax

所以我正在为网站添加一些功能,其中一个是一个窗口,您可以在其中输入电子邮件地址,该列表稍后将用于自动警报电子邮件。

我已经完成了将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')"));
?>

这只是我认为应该是这样的一种外壳。

我离开了吗?关于实际代码应该如何的一些指导会很好。

提前谢谢!

3 个答案:

答案 0 :(得分:0)

一个想法是你应该清理输入,并使用PDO /绑定参数来保证安全性,但另一个想法是你的名字有差异($ selectedName vs $ selectedMail)。它们应该是相同的:

$selectedMail= $_POST['postMail'];


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

答案 1 :(得分:0)

$selectedMail= $_POST['postMail'];

if(isset($_POST['postMail']){

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

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

答案 2 :(得分:0)

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

首先,如果每次用户添加电子邮件时调用PHP代码,如果用户单击删除按钮,则还需要执行相同的操作 - 仅使用删除条目的例程。 但是你不应该只是做一个

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

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

另一个想法是在之前的javascript例程中检查重复的电子邮件地址。这可以让你循环遍历alert_ul的所有条目,或者我这样做的方法就是简单地保留所有输入的电子邮件地址的单独数组(如果用户点击删除,不要忘记也从数组中删除电子邮件)可以比ul-list更容易检查电子邮件是否存在。

要使用ajax调用数据库脚本,只需在add-click函数中调用它:

$.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示例中实现数组存储 - 我会将重复检查留给您; - )