Question

按钮应该在相同的上下文中（例如，CRUD或＆＃34;输入名称和年龄＆＃34;事物的类型）。
他们必须必须在<form>。

与往常一样，当有多种方法来完成相同的事情时，我开始考虑安全风险/代码可重用性/代码可读性等，以一种方式而不是另一种方式。我一直在寻找Interwebs中的许多例子，几乎所有的例子都以不同的方式做到了这一点。

虽然我理解可能很难直截了当地回答这个问题，但我要求你考虑这些因素（这让我感到困惑的选择路径）：

我应该使用<form>还是只使用<div> s？

我应该使用多个<form>吗？

我应该使用<button>代替<input type="submit"...>吗？

如果我想在此次通话中使用AJAX，我选择的是否有任何不同？

也许甚至有更好的＆＃34;实现这一目标的方法比我上面提到的那样？

为了这个例子，我们只使用两个按钮 - INSERT和DELETE。以下是我的意思的两个例子（注意：请不要注意按数字删除记录的逻辑，这些只是示例;）......

示例1 （按值）

<form action="crud.php" method="post"> <input type="text" name="nrecords" size="3"> <input type="submit" name="dbrecords" value="Insert records"> <input type="submit" name="dbrecords" value="Delete records"> </form> <?php $numberofrecords = $_POST["nrecords"]; if($_POST['dbrecords'] == 'Insert records'){ echo "Inserting {$numberofrecords} records"; } else if($_POST['dbrecords'] == 'Delete records'){ echo "Deleting records"; } ?>

示例2 （按名称）

<form action="crud.php" method="post"> <input type="text" name="nrecords" size="3"> <input type="submit" name="insert" value="Insert records"> <input type="submit" name="delete" value="Delete records"> </form> <?php $numberofrecords = $_POST["nrecords"]; if (isset($_POST['insert'])) { echo "Inserted {$numberofrecords} records"; } else if (isset($_POST['delete'])) { echo "Deleted records"; } ?>

Answer 1

我应该使用<form>还是只使用<div>？

始终使用表单，遵循Progressive Enhancement和Unobtrusive JavaScript

的原则

我应该使用多个<form>吗？

只有当您要收集多个不同的数据集时（作为单独的任务，如果数据是相关的并且您将它们全部收集在一起，请使用<fieldset> s。）

在这个例子中，你没有。

我应该使用<button>代替<input type="submit"...>吗？

使用<button> if：

您需要不同的值和标签（这在处理国际化时尤其有用）。
你不介意打破旧的MSIE

如果我想在此次通话中使用AJAX，它会对我选择的产品有什么不同吗？

没有。见上文重新不引人注目的JS。

Answer 2

在这种情况下，您应该使用ajax。 $_POST['action']将决定如何处理它。

<form action="crud.php" method="post" class="YourForm">
    <input type="text" name="nrecords" size="3">
    <input type="submit" name="insert" value="Insert records" onclick="insert;"> 
    <input type="submit" name="delete" value="Delete records" onclick="delete;"> 
</form>

<script>
   function delete(){
        var postdata = $('form.YourForm').serialize() + "&action=delete";
        $.ajax({
            type: 'POST',
            url: 'yourURL.php',
            data: postdata,
            dataType: 'json'});
        return false;
}
   function insert(){
        var postdata = $('form.YourForm').serialize() + "&action=insert";
        $.ajax({
            type: 'POST',
            url: 'yourURL.php',
            data: postdata,
            dataType: 'json'});
       return false;
}
</script>

使用两个或更多提交按钮的正确方法

2 个答案: