时间戳

首页 > 解决方案 > 我按两次提交后，Ajax 工作

javascript - 我按两次提交后，Ajax 工作

问题描述

非常简短，这是我在myPage.php中的 php 代码：

<div class="table-responsive" id="items">
 <table class="table" id="myTable">
  <thead><tr><th>item<th>status<th>options</thead>
   <tbody>
    [...]
    echo "<tr><td>$item<td>$status<td>to-be-added
    [...]
    echo "<tr><td colspan='3'>";
    echo "<form method='post' id='newitem'>";
    echo "<input type='hidden' id='uid' name='uid' value='$uid'>";
    echo "<div><button type='submit' class='btn btn-info' id='submitbtn'>new item</button></div>";
    echo "</form>";
[...]

这是我的.js文件 ajax 代码：

$(document).ready(function () {
    $('form').submit(function (event) {
        $('#errors').remove(); // remove the error text
        $('#success').remove(); // remove the success text
        var formData = $("#newitem").serialize();
        $.ajax({
            type: 'POST',
            url: 'process.php',
            data: formData,
            dataType: 'json',
            encode: true
        })
                .done(function (data) {
                    console.log(data);
                    if (!data.success) {
                        $('form').append('<div id="errors" class="alert alert-warning"></div>');
                        if (data.errors.validitem) {
                            $('#errors').append('<p>' + data.errors.validitem + '</p>');
                        }
                    } else {
                        $('#addresses').append('<div id="success" class="alert alert-success">' + data.message + '</div>');
                        $("#myTable").load("mypage.php #myTable");
                    }
                })
                .fail(function (data) {
                    console.log(data);
                });
        event.preventDefault();
    });
});

我不显示 process.php 函数，因为这很可能不是问题。

  1. 当我第一次加载页面并按下提交时，会发生以下事情：
    • 通过 ajax 创建一个新项目
    • 表被填充了新条目而不刷新页面，但使用了加载选项：*$("#myTable").load("mypage.php #myTable");*
    • 总之，一切都按预期工作！

注意：只有在我添加表加载后才会出现问题。$("#myTable").load("mypage.php #myTable"); 提交后没有重新加载表格，提交总是有效，只是表格没有显示实时更改，我需要执行 F5 ......这不是计划。

  1. 加载表格后，当我再次按下按钮时，似乎什么也没发生，除了我的成功消息消失了。

  2. 在这个阶段，我需要按两次按钮。只有在我第二次按下提交后，ajax 才能正常执行，并且表格会显示创建的新项目。对于所有下一次提交，此行为是一致的。所有仅在第二次提交后执行。

我需要一些帮助。怎么了？

我只想重新加载 myPage.php 的一部分，所以只有完整的表#myTable 或整个 div #items，以及我在 myPage.php 中拥有的所有验证功能，我不想在此过程中重新创建完整的表。 php 并通过 POST 发送，因为我在其他论坛上看到了一些推荐。

标签： javascriptphpjqueryajax

解决方案

问题在这里：$("#myTable").load("mypage.php #myTable");

mypage.php是您的主页。你加载一次。然后，在表格内部，您使用它.load()来覆盖它。这不好。

然后，您有一个全新的表，其中没有处理程序绑定到提交按钮。因此，在提交按钮单击（第二次）时，使用<form>元素的“正常行为”提交表单......并且页面完全重新加载。

作为一种可能的解决方案，我会.load()在form... Not the上使用table，如下所示：

$("#newitem").load("mypage.php #newitem");

但是您应该尝试$("#newitem").reset()删除#errorand #success... 而不是.load().

编辑
第二次：

尝试$(document).on("submit", "form", function (event) {
代替$('form').submit(function (event) {

那是委托......所以你的提交按钮总是会绑定到函数上，即使它被覆盖了。

推荐阅读