使用 ajax 填充动态创建的 div

Question

我试图弄清楚如何将表单提交中的 ajax 响应输出到特定的 div。该表单是动态生成的按钮，其中来自 mysql 的数据作为值，并且对于生成的每个按钮，还为这样的结果创建了一个 div。

Example form id's:  
id="form1"
id="form2"
id="form3"
id="form4"

div id's:
<div class="res" id="result1">Display form1 data</div>
<div class="res" id="result2">Display form2 data</div>
<div class="res" id="result3">Display form3 data</div>
<div class="res" id="result4">Display form4 data</div>

这是我的示例表单。 $count 在 while 循环中增加 id “form”。

echo '<form name="v" action="test.php" value="' . $row['data'] . '" method="post" id="form' . $count . '"><input name="v" type="hidden" value="' . $row['data'] . '"><input type="submit" class="btn" value="Submit"></form>';

我可以让它工作，但如果我只对类使用“.res”，它会用单击提交按钮的成功响应填充所有 div，这就是为什么我需要使用递增数字的唯一 ID $计数。我不确定如何实现这一点。

$(document).ready(function(){
    $(document).on("submit", "#form", function(event)
    {
        event.preventDefault();        
        $.ajax({
            url: $(this).attr("action"),
            type: $(this).attr("method"),
            dataType: "text",
            data: new FormData(this),
            processData: false,
            contentType: false,
        success: function(data, status) {
            $(".res").html(data);
        },
        error: function() {
            alert('An error occurred.');
        }
        });        
    });
});   

有人可以帮帮我吗？谢谢。

Answer 1

您可以使用包含目标 div 的数据属性扩展表单标签。

echo '<form name="v" action="test.php" value="' . $row['data'] . '" method="post" id="form' . $count . '" data-target="result' . $count . '">...';

稍后在你的 ajax 成功函数中，做这样的事情

$(document).ready(function(){
    $(document).on("submit", "form[data-target]", function(event)
    {
        var $target = $('#' + $(this).data('target'));
        event.preventDefault();        
        $.ajax({
            url: $(this).attr("action"),
            type: $(this).attr("method"),
            dataType: "text",
            data: new FormData(this),
            processData: false,
            contentType: false,
        success: function(data, status) {
            $target.html(data);
        },
        error: function() {
            alert('An error occurred.');
        }
        });        
    });
});   

Answer 2

您可以使用.each() 提供计数器变量的事实：

$("form").each(function (i) {
    $(this).on("submit", function () {
    // ...

    // in the ajax success callback:
    $(".res").eq(i).html(data);

Answer 3

ID 必须是唯一的，所以应该这样做

$(document).on("submit", "form", function(event) {
  event.preventDefault();
  var id = this.id; // form1, form2 etc
  ....

或

$(document).on("submit", "form[name='v']", function(event) {
  event.preventDefault();
  var id = this.id; // form1, form2 etc
  ....

然后

  $("#"+id.replace("form","result")).html(data); // result1, result2 etc

或者在表单上使用数据属性：

echo "<form data-id='result".$count."' ....>

并且拥有

$(document).on("submit", "form[name='v']", function(event) {
  event.preventDefault();
  var id = $(this).data("id"); // result1, result2 etc
  ....

然后

  $("#"+id).html(data); // result1, result2 etc