HTML5表单提交等价$.post - HTML5 Form Submission Equivalent $.post

所以，我正在开发一个小型web应用程序，我已经到了可以将数据输入表单、单击按钮并从表单中删除数据的地步。我希望能够只点击表中的数据，并让它执行类似的功能，即以某种方式使用$.post来发布数据，而不是让表单执行。不过，我不知道如何做到这一点。我读了几篇教程和文章，不知道如何复制表单的提交功能。

以下是我目前通过form/php:做事的方式

表单模板

<form name="DeleteMarker" action="index.php" target="_self" method="post">
             <fieldset class="Splice">
                <legend>Delete Marker</legend>
                    <label>Employee: </label><select name="DEmployee">
                    <label>Job Name: </label><select name="DJob">
                    <label>Customer Name: </label><select name="DCustomer">
                    <br>
                    <label>Latitude: </label><input name="DLatitude" min="-180" max="180" step="0.00001" required />
                    <label>Longitude: </label><input name="DLongitude" min="-180" max="180" step="0.00001" required />
                    <br>
                    <input type="submit" value="Delete" />
            </fieldset>
        </form>

PHP

if(isset($_POST['DEmployee'])) {
        $sql="DELETE FROM Splices WHERE (Employee='$_POST[DEmployee]' AND Job='$_POST[DJob]' AND Customer='$_POST[DCustomer]' AND Latitude=$_POST[DLatitude] AND Longitude=$_POST[DLongitude])";
        if (!mysql_query($sql,$Splices)) {
            die('Error: ' . mysql_error());
        }

我有一个javascript函数，点击表格就会显示一个警报，我只需要弄清楚如何在其中放入$.post或$.ajax语句，以复制我已经拥有的表单的功能。

我拥有的（不正确的）javascript：

function deleteRecord(e,j,c,l,ln) {
        confirm("Delete Record ("+e+", "+j+", "+c+", "+l+", "+ln+")?");
        if(confirm){
            $.post("index.php", {DEmployee:e, DJob:j,DCustomer:c,DLatitude:l,DLongitude:ln});;
        }
}

从你对$.post的使用中，我假设你正在使用jQuery，尽管你没有标记它。幸运的是，jQuery为你做了所有的工作：

$.post("index.php", $("form[name=DeleteMarker]").serialize(), function(data) {
    //Do something with the response here
}).error(function() {
    //Do something in the case of an error here
})

您没有提到jQuery，但$.post是jQuery上可用的方法。如果你正在使用jQuery并将其包含在你的页面中，那没关系。

$('form[name=DeleteMarker]').submit(function() {
  var dataString = $(this).serialize();
  $.post("index.php", dataString);
  return false;
});

编辑：

实际上，您的deleteRecord()函数还有其他一些不正确的用法。

confirm()返回布尔值（true或false），因此您必须使用此返回值来继续代码。

，if(confirm) {}不是正确的方法

你必须像一样使用它

var c = confirm("do you confirm?");
if(c) {
   //yes it's confirmed.
}

或者更有用的

if(confirm("do you confirm?")) {
   //yes it's confirmed.
}

你说'url仍然只是"index.php"'，你怎么看的，我不知道，但这很正常，因为方法不是GET，所以url不会将发布的数据作为querystring包括在内。如果它不起作用，可能还有其他问题。

第2版：事实上，它们之间没有区别，好吧，这里有一个完整的例子，你可以查看你的浏览器javascript开发工具，看看后台发生了什么。

<?php
  if(isset($_GET['DEmployee'])) {
        $sql="DELETE FROM Splices WHERE (Employee='$_POST[DEmployee]' AND Job='$_POST[DJob]' AND Customer='$_POST[DCustomer]' AND Latitude=$_POST[DLatitude] AND Longitude=$_POST[DLongitude])";
        if (!mysql_query($sql,$Splices)) {
            echo "Error:  ". mysql_error();
        } else {
            echo "employee deleted";
        }
  } else {
        //you can add something else here
        //<div>blablabla</div>
        //and the form for delete
?>
        <html>
        <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
         $(document).ready(function() {
            $("form[name=DeleteMarker]").submit(function() {
                if(confirm("This will be deleted, are you sure?")) {
                    var dataString = $(this).serialize();
                    $.get("index.php", dataString ,
                        function(data){
                          alert(data);
                    });
                } 
                return false;
            });
         });
        </script>
        </head>
        <body>
        <form name="DeleteMarker" method="GET">
             <fieldset class="Splice">
                <legend>Delete Marker</legend>
                    <label for="DEmployee" >Employee: </label>
                    <select name="DEmployee">
                      <option value="name1">name1</option>
                    </select>
                    <label for="DJob">Job Name: </label>
                    <select name="DJob">
                      <option value="job1">job1</option>
                    </select>
                    <label for="DCustomer">Customer Name: </label>
                    <select name="DCustomer">
                      <option value="cusname1">customer name1</option>
                    </select>
                    <br>
                    <label>Latitude: </label><input name="DLatitude" min="-180" max="180" step="0.00001" required />
                    <label>Longitude: </label><input name="DLongitude" min="-180" max="180" step="0.00001" required />
                    <br>
                    <input type="submit" value="Delete" />
            </fieldset>
        </form>
        </body>
        </html>
<?php
  }
?>