Question

我使用Ajax通过php在我的页面上提交了许多表单。该代码在预装了页面的表单中运行良好。但是，我需要提交一些不加载页面的动态表单，它们通过其他javascript函数调用。请，我需要有人帮我查看用于不加载页面的表单的代码。此外，'失败'条件无效。代码如下：

<script type="text/javascript">

 feedbar = document.getElementById("feedbar");

jQuery(document).ready(function() { 

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

      $.ajax({
        type: 'post',
        url: 'data/process.php',
        data: $('#addressform').serialize(),
        success: function () {
            feedbar.innerHTML='<div class="text-success">New Addressed Saved Successfully</div>';
        },
        failure: function () {
            feedbar.innerHTML='<div class="text-danger">Error Saving New Address</div>';
        }
      });
      e.preventDefault();
    });

});

感谢。

Answer 1

您需要通过现有的html（例如body）绑定事件。事件处理程序仅绑定到当前选定的元素;在您的代码调用.on（）

时，它们必须存在于页面上

请参阅api：https://api.jquery.com/on/

试试这样：

$("body").on('submit', '#addressform',function (e) {

      $.ajax({
        type: 'post',
        url: 'data/process.php',
        data: $('#addressform').serialize(),
        success: function () {
            feedbar.innerHTML='<div class="text-success">New Addressed Saved Successfully</div>';
        },
        failure: function () {
            feedbar.innerHTML='<div class="text-danger">Error Saving New Address</div>';
        }
      });
      e.preventDefault();
    });

});

Answer 2

您可以委托给文件：

$(document).on('submit', '#addressform', function (e) {
    $.ajax({
      type: 'post',
      url: 'data/process.php',
      data: $(this).serialize(), // <----serialize with "this"
      success: function () {
          feedbar.innerHTML='<div class="text-success">New Addressed Saved Successfully</div>';
      },
      error: function () { //<----use error function instead
          feedbar.innerHTML='<div class="text-danger">Error Saving New Address</div>';
      }
    });
    e.preventDefault();
  });
});

您已将此行发布如下：

我需要提交一些不加载页面的动态表单

我对这一行的理解是你想要一个动态生成的所有表格的通用提交功能，然后你可以这样做：

$(document).on('submit', 'form', function (e) {
    $.ajax({
      type: 'post',
      url: 'data/process.php',
      data: $(this).serialize(), // <----"this" is current form context
      success: function () {
          //some stuff
      },
      error: function () { //<----use error function instead
          //some stuff          
      }
    });
    e.preventDefault();
  });
});

您最后的评论：

你可以试着像这样在ajax响应中获取文本：

success: function (data) {
   feedbar.innerHTML='<div class="text-success">'+ data +'</div>';
},
error: function (xhr) { //<----use error function instead
   feedbar.innerHTML='<div class="text-danger">' + xhr.responseText + '</div>';
}

如果成功：

这里在成功函数中你获得了数据中的响应，这是成功函数中的争论，它保存了它向服务器端请求的响应。

如果错误：

同样地，如果在服务器端出现问题或者发生了任何类型的执行，那么xhr error函数的争论保持responseText。

最后，我建议您可以使用jQuery以这种方式将响应放在feedbar选择器中：

var $feedbar = $('#feedbar');

所以成功功能：

$feedbar.html('<div class="text-success">'+ data +'</div>');

所以错误功能：

$feedbar.html('<div class="text-success">'+ xhr.responseText +'</div>');

通过php提交Ajax表单，无需document.ready

2 个答案:

您最后的评论：

如果成功：

如果错误：