Question

我还没有开始编码，所以我没有任何东西要展示。我还在努力想要开始。我将有一个页面，它将有各种形式，取决于访问者试图做什么。我可以将它们全部放在隐藏的div中，并根据需要取消隐藏它们，并使用ajax更新某些字段/值，但这对我来说似乎不是最好的主意。

相反，我想的是向我的服务器发送ajax请求并返回表单的HTML，但是如果我没记错的话，那个表单实际上不会只是通过将它写入文档而添加到DOM中

所以，我的问题是“我如何将所有输入的HTML表单添加到DOM中，覆盖任何冲突的元素？”或“我应该如何在页面上动态添加/替换表单。”

我愿意为此使用普通的JS或JQuery。我使用PHP作为服务器端代码。

Answer 1

如果您想通过AJAX加载HTML并将内容放入DOM，最简单的方法是使用jQuery的load方法。

以下是一个例子：

$( "#form-container" ).load( "forms/login-form.html" );

这会插入位于http://yourserver/forms/login-form.html的HTML，并将其放入ID为form-container的元素中。

如果您需要在将HTML添加到DOM之前对HTML进行一些处理，我建议使用jQuery＆＃39; .get方法。在bejonbee's answer中有一个很好的例子。

Answer 2

由于您没有任何要显示的内容，请查找jQuery。更具体地查一下

$.html()
$.appendTo()
$('<form>')
$.load
$.get
$.ajax

这样做，你应该很清楚你需要做什么。 http://jquery.com是一个很好的资源。

Answer 3

如果您使用的是jQuery，它应该像这样简单：

$.get( "ajax/form_html.html", function( data ) {
  var $form = $(data);
  $('.form_container').append($form);
  $form.on('submit', function (event) {
      // handle submit here if needed
  });
});

Answer 4

如果你在php文件中创建一个表单，请用这种方式说出form.php：

<form action="" method="post" >
     <label>Name:</label>
     <input type="text" name="yourname" />
     <!-- more fields go here -->
</form>

您可以通过jquery中的ajax获取所需的表单，然后将其添加到所需div中的页面。

假设您在页面上有一个ID为“container”的div

$.ajax({url: 'location/of/form.php'}).done(function(data){
  $('#container').append(data); 
})

然而，正如MonkeyZeus指出的那样，你的问题非常普遍，多一点方向会很好

Answer 5

除了偏好之外，我无法在其他答案中添加更多内容。我通常使用$ .ajax并将响应作为呈现的HTML块返回，可以在处理场景时写入div：

$.ajax({
    type : "POST",
    url : "YOUR_REQUEST_URL_GOES_HERE.php",
    data : "YOUR_QUERY_STRING_KEY=" + YOUR_VALUE,
    success : function(data) {
        $("#success").html(data);
    },
    error : function(e) {
        $("#error").html(e);
    }
});

如果你想要一个更简单的功能，可以使用已经提到的$ .get或$ .load，因为它可能更符合你的目的，但我个人喜欢$ .ajax。

使用ajax请求将表单添加到现有页面

5 个答案: