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

我正在使用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();
    });

});

feedbar=document.getElementById（“feedbar”）；
jQuery（文档）.ready（函数（）{
$（'#addressform'）。关于（'submit'，函数（e）{
$.ajax({
键入：“post”，
url:'data/process.php'，
数据：$（'#addressform'）。序列化（），
成功：函数（）{
feedbar.innerHTML='New Addressed Saved Successfully'；
},
失败：函数（）{
feedbar.innerHTML='保存新地址时出错'；
}
});
e、 预防默认值（）；
});
});

---

谢谢。

您需要通过现有html（例如body）绑定事件。 事件处理程序仅绑定到当前选定的元素；在代码调用.on（）时，它们必须存在于页面上

见api:

试着这样做：

$("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();
    });

});

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>';
}

$（“body”）。关于（'submit'，'#addressform'，函数（e）{
$.ajax({
键入：“post”，
url:'data/process.php'，
数据：$（'#addressform'）。序列化（），
成功：函数（）{
feedbar.innerHTML='New Addressed Saved Successfully'；
},
失败：函数（）{
feedbar.innerHTML='保存新地址时出错'；
}
});
e、 预防默认值（）；
});
});

您可以委托给文档：

$(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();
  });
});

因此，在成功函数中：

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

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

$feedbar.html（“”+数据+“”）；

因此，在错误函数中：

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

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

$feedbar.html（“”+xhr.responseText+“”）；

尝试删除

jQuery（document）。准备好
并在
div
之后发布jQuery代码，尝试如下：
$（document）。on（'submit'，'#addressform'，function（e）{
使用@Jai:$（document）。on（'submit'，'form'，function（e）{还有一件事：我需要回显处理这些表单的php脚本的反馈，因为不同的表单需要不同的反馈。有人能帮我回显ajax中php脚本的“成功”和“错误”函数的反馈吗？谢谢。如果你解释了你所做的更改以及为什么更改，这可能是一个不错的答案，而不仅仅是专业的我喜欢你的方法，因为我不需要对多个表单使用多个函数。但是，我使用了它，我得到了成功函数，但是php脚本没有被处理。你的php脚本在哪里？你也应该把它添加到你的问题帖中。现在一切都好了。还有一件事：我没有ed o使用同一脚本从不同的表单获得不同的反馈。您能帮助我回馈处理此页面的php脚本的反馈吗？这样我可以获得动态反馈，如用户注册成功或用户更新成功，具体取决于正在处理的表单。谢谢。您可以获得从服务器端返回成功响应函数。请参阅更新。