Question

我正在尝试将div的内容写入新的html文件。 div的内容由ajax本身生成，因此当我尝试将内容发布到新文件时，写入文件的所有内容都是原始html。有没有办法写'ajaxed'内容的div内容？

这是我的ajax代码：

$("#getSource").on('click', function(){

  headerURL = $(".header-code").attr('data-url');
  $.ajax({
    url: headerURL,
    data: "function=showCode",
    success: function(data){
      $('code #mainCode').append(data);
    }
  });

  var bufferId =$("#mainCode").html();
  $.ajax({
     type : "POST",
     url : "postCode.php",
     data: {id : bufferId},
     dataType: "html",
     success: function(data){ 
       alert("ok");  
     }
  });
});

我的PHP代码：

$handle = fopen("test.html", 'w+');
$data = $_POST['id'];
if($handle) {
    if(!fwrite($handle, $data )) {
        echo "ok";
    }
}

最终结果是什么写在test.html：

<div id="mainCode"></div>

当我真的需要时：

<div id="mainCode">
  [dynamic content that is added by the user via ajax]
</div>

Answer 1

在第一次调用附加内容后发出第二个AJAX调用。将JavaScript代码更改为：

$("#getSource").on('click', function(){

  headerURL = $(".header-code").attr('data-url');
  $.ajax({
    url: headerURL,
    data: "function=showCode",
    success: function(data){
      $('code #mainCode').append(data);

      // second ajax call
      var bufferId =$("#mainCode").html();
      $.ajax({
         type : "POST",
         url : "postCode.php",
         data: {id : bufferId},
         dataType: "html",
         success: function(data){ 
           alert("ok");  
         }
      });
    }
  });
});

Answer 2

您还可以使用$ .ajax返回的延迟对象在第一个之后运行第二个ajax请求：

headerURL = $(".header-code").attr('data-url');
$.ajax({
    url: headerURL,
    data: "function=showCode",
    success: function(data){
      $('code #mainCode').append(data);
    }
}).done(
  function() {
    var bufferId =$("#mainCode").html();
    $.ajax({
       type : "POST",
       url : "postCode.php",
       data: {id : bufferId},
       dataType: "html",
       success: function(data){ 
         alert("ok");  
       }
    }); 
  }
)

Ajax：发布动态ajaxed内容

2 个答案: