Question

大家好，我对这整件事情都是新手。

我想帮助弄清楚如何做到这一点。我可以从数据库中提取信息并将内容放入使用ajax / javascript但我无法弄清楚如何完成下面的问题。我想能够让我的PHP表单提交并更新页面刷新。

实施例

第1页。主页 -落下更改下拉列表的javascript / Ajax从第2页获取信息。第2页的表单现在显示在下拉列表更改时没有页面刷新。当按下第二页的提交按钮时，将表格数据插入到Mysql数据库中。一旦将新数据提交到sql数据库中，表单就会更新并在mysql数据库中显示下拉列表中特定ID的数据。

第2页。表格下拉信息。如果数据库中有数据，表单将填充信息。按钮提交上的Javascript / Ajax将输入字段发送到第3页

第3页。使用javascript / ajax将数据插入mysql，因此不需要刷新页面

由于

Answer 1

您需要遍历表单中的所有输入字段，将它们打包成查询字符串，然后将其发送到表单处理页面。

像

这样的东西

var queryString = '';
for(var i = 0; i < document.formName.elements.length; ++i) {
  queryString += document.formName.elements[i].name + '=';
  queryString += document.formName.elements[i].value + '&';
}
//trim off the last '&' here

如果您正在使用选择框，则必须在上面的循环中识别它们并以稍微不同的方式提取它们的值。我在这里使用的查询字符串格式用于POST查询;在GET查询中，您需要使用'？'

将其附加到表单处理页面的网址中

Answer 2

考虑使用jQuery的以下示例（尽管您可以将其调整为原始js或不同的js库）：

function doSubmit(event) {
  event.preventDefault();
  var $this = $(this);
  $.ajax({
    url: $this.attr('action'),
    type: 'post',
    data: $this.serilaize(),
    success(responseHtml) {
      // assume responseHtml is the next form
      var newForm = ajaxifiyForm($('form', responseHtml));
      $this.unbind('submit').replaceWith(newForm);
    }
  });

  return false;
}

function ajaxifyForm(form) {
  return $(form).submit(doSubmit);
}

$(document).ready(function(){
  ajaxifyForm($('#your-form'));
});

这里我们依靠第一页加载来使表单已经包含在服务器端。当DOM准备就绪时，我们将事件处理程序附加到表单的submit事件。此处理程序将覆盖正常的提交过程，而是使用ajax。它提交到我们在action属性中指定的URL。

当帖子成功时，它会从该帖子获取HTML响应，并在应用我们在原始表单上使用的相同处理程序后用它替换原始表单。这依赖于我们发布的php脚本总是返回下一个表单并填写所有值的假设。

请记住，您可以通过这种方式提交文件数据。您需要使用iframe作为中介来执行此操作（还有其他方法可以执行此操作，但不使用iframe）。你可以谷歌ajax file upload来解决这个问题。

初学者Javascript ajax表单帮助

2 个答案: