Question

我在php中异步加载对评论的回复，就像在youtube评论中一样。像这样加载的表单（即回复表单）的ajax处理程序不起作用。 e.preventDefault（）不起作用。表单将提交到操作页面本身，页面将重定向到操作URL。如果我编辑回复。它可以工作，但页面被重定向到动作网址。这仅适用于加载了ajax的回复。相同的处理程序用于常规注释，它工作正常。

评论：

加载回复的评论：

当编辑回复时，它只会转到/path/to/submit.php并显示json输出的值，如下所示

result on submitting a reply form

用于显示或隐藏回复的Ajax：

//load or hide replies    
function loadmore(id) {
  var val = $('#' + id).data("value");
  var count = $('#' + id).data("count");
  $.ajax({
    type: 'post',
    url: '/path/to/submit.php',
    data: {
      replyof: val
    },
    success: function(response) {
      var content = document.getElementById("show" + val);
      content.innerHTML = response;
      var clicknum = $('#' + id).data("clicknum");
      $('#' + id).data("clicknum", 2);
      if (!$("#show" + val).is(":hidden") && clicknum != 1) {
        document.getElementById(id).innerHTML =
          ' View all ' + count + ' replies <i class="fas fa-angle-down"></i>';
        $("#show" + val).hide();
      } else {
        document.getElementById(id).innerHTML =
          'Hide all replies <i class="fas fa-angle-up"></i>';
        $('#show' + val).show();
      }
    }
  });
}

我使用相同的类进行评论以及回复和ajax将表单提交到同一页面/path/to/submit.php使用例如

<form class="replyform" action="/path/to/submit.php">
...
<button type="submit">Delete</button>
...
</form>

表单处理程序

$(".replyform").submit(function(e) {

  var URL = $(location).attr('href');
  $.ajax({
    async: true,
    type: "POST",
    url: $(this).attr('action'),
    data: $(this).closest('form').serialize(),
    success: function(data) {
      if (data.result === 1) {
        window.location = "/login";
      } else if (data.result === 2) {
        alert('Some error occured.Please try Later');
      } else if (data.result === 3) {
        replyer(data.comment);
        $('body').load(URL);
      } else {
        $('body').load(URL);
      }
    },
    dataType: "json"
  });

  e.preventDefault();
});

Answer 1

由ajax渲染的.replyform因此使用on而不是传统方式

$(document).on("submit", ".replyform",function(e) {
  var URL = $(location).attr('href');
  $.ajax({
async: true,
    type: "POST",
    url: $(this).attr('action'),
    data: $(this).closest('form').serialize(),
    success: function(data) {
      if (data.result === 1) {
        window.location = "/login";
      } else if (data.result === 2) {
        alert('Some error occured.Please try Later');
      } else if (data.result === 3) {
        replyer(data.comment);
        $('body').load(URL);
      } else {
        $('body').load(URL);
      }
    },
    dataType: "json"
 });

      e.preventDefault();
});

Answer 2

我认为你的表格错了。您需要一个id属性。我不认为你可以通过它的类名来称呼它。

<form id="myForm" class="replyform" action="/path/to/submit.php">
...
<button type="submit">Delete</button>
...
</form>


$("#myForm").submit(function(e) {

...rest of script.

Ajax提交一个ajax加载表单

2 个答案: