初学者javascript ajax表单帮助

我想请一些帮助了解如何做到这一点。我可以将数据从数据库中提取出来，并使用ajax/javascript编写东西，但我无法弄清楚如何完成下面的问题。我希望能够使我的PHP表单提交并更新页面刷新。

例子。

Page1。主页 - 自下而上 JavaScript /下拉式变化的Ajax获取来自第2页的信息。从第2页的表格现在在下拉变化时不显示页面刷新显示。当从第二页提交按钮被按下时，将表单数据插入Mysql数据库。将新数据提交到sql数据库后，表单会在下拉列表中更新并显示mysql数据库中特定ID的数据。

Page2。表单下拉式信息。如果数据库中有数据，表单中充满了信息。的JavaScript/AJAX按钮提交使用javascript发送输入字段到第3页

第3页。插入数据到MySQL/AJAX所以没有页面刷新需要

感谢

来源

2010-10-25 Eric

你使用任何particualr JS库（jQuery，Dojo等..），或者你需要在原始JavaScript中做到这一点？ – prodigitalson 2010-10-25 20:02:07

无论如何。为了做到这一点，我不知道那是什么。 – Eric 2010-10-25 20:08:12

你完成所有需要循环将表单中的输入字段打包成查询字符串，然后将其发送到表单处理页面。

喜欢的东西

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查询中，你需要将这个附加到表单处理页面的url上，用'？'

来源

2010-10-25 20:05:30

我知道该怎么做。但是，一旦数据库中的信息发生变化，该如何更新表单呢？ – Eric 2010-10-25 20:10:24

哦 - 你只需要做一些像document.getElementById（'formID'）。innerHTML = xmlHttp.responseText;在ajax函数中。 – 2010-10-25 20:30:24

考虑使用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准备就绪时，我们将事件处理程序附加到表单的提交事件。这个处理器覆盖了正常的提交过程，而是使用ajax。它提交给我们在action属性中指定的URL。

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

请记住，您可以用这种方式提交文件数据。你需要使用一个iframe作为中介来做到这一点（还有其他方法可以做到这一点，而不是使用iframe）。你可以谷歌ajax file upload解决这个问题。

来源

2010-10-25 20:26:02 prodigitalson

初学者javascript ajax表单帮助

回答

相关问题