php - 使用ajax提交表单数据，无需刷新

Question

我有一个包含多个表单的页面，这些表单删除 MySQL 数据库中的行。表格也是从 MySQL 数据库填充的。

我尝试在不刷新页面的情况下提交表单，但这些行并未从我的数据库中删除。

更新:我最初并没有提到包含我动态生成的表单的 div。

该表单基于选择列表中的选项。代码:

      <form>
        <h3>Vælg medlem</h3>
            <select name="users" onchange="showUser(this.value)">
            <?php
            $i = 0;
            while($row = mysql_fetch_array($result))
              { if (!$i++) echo "<option selected='selected'>Vælg medlem</option>" ?>

                <option value="<?php echo $row[medlemmer_id]; ?>"><?php echo $row[medlemmer_navn]; ?></option>

                <?php } $i++; ?>
            </select>
        </form>

表单使用JS将表单添加到页面的div中。代码:

<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","getuser.php?q="+str,true);
  xmlhttp.send();
};
</script>

更新结束

形式:

  <form id="myform2">
    <p><?php echo $row[boder_navn]; ?> <?php echo $row[boder_pris]; ?> kr. - <?php echo $dato; ?></p>
    <input type="hidden" id="relation_id" name="relation_id" value="<? echo $row[relation_id]; ?>"/>
    <input name="submit" type="submit"/>
 </form>

发送数据的脚本:

  $(function () {

    $('#myform2').on('submit', function (e) {

      e.preventDefault();

      $.ajax({
        type: 'post',
        url: 'delete.php',
        data: $("#relation_id").val();,
        success: function () {
          alert('form was submitted');
        }
      });

    });

  });

删除行的php文件:

 <?php
 mysql_connect("#######", "########", "#######") or die(mysql_error());
 mysql_select_db("#######") or die(mysql_error());
 mysql_query("DELETE FROM boder_has_medlemmer WHERE relation_id = ". $_POST['relation_id'] .""); 
 ?>

如果我只是使用带有 method="POST" 和 action="delete.php 的表单，它就可以工作。这意味着有问题的行被删除，但是页面刷新。

对我哪里出错有什么建议吗？

Answer 1

地点

return false;

在 ajax 调用函数之后并更改参数的放置方式

$(function () {

$('#myform2').on('submit', function (e) {

   e.preventDefault();

   var rel_id = $("#relation_id").val();

   $.ajax({
      type: 'post',
      url: 'delete.php',
      data: {
         relation_id: rel_id
      },
      success: function () {
        alert('form was submitted');
      }
    });
    return false;
  });

});