php - AJAX 发布后更新 DIV 内容

Question

我们有一个 div 结构如下：

<!-- main.php starts -->
    <div class="main">
      <div class="one">
         <span class="buttonEdit">EDIT</span>
      </div>
      <div class="two">Content</div>
      <div class="editBox">
       <!-- abc.php which is loaded onClick -->
        <textarea class="editArea"></textarea>
        <span class="buttonSave">SAVE</span>
       <!--abc.php ends -->
      </div>
    </div>
<!-- main.php ends -->

我使用的 jQuery 是这样的：

$(document).ready(function() { 
        //SAVE BUTTON
        $(".buttonSave").click(function(){
            //AJAX SAVE HERE
            $.post("save.php",function(msg){
                var newContent;
                newContent = $(".editArea").val();

                $(this).parents(".main").find('.two').text(newContent);
             });
        });

过程： 单击 EDIT 按钮后，外部页面 ( abc.php ) 将通过 jQuery 的加载函数加载到 div( class="editBox" )。编辑和保存后，来自 textarea 的内容必须显示在 div( class="two" ) 中。

重要事项有几个相似的块并且类名相同。jQuery 是用外部文件abc.php编写的。是否可以在 AJAX 中使用“查找”和“此”？

需要的解决方案：我们需要 jQuery 部分。紧迫的！

关于 jsFiddle：http: //jsfiddle.net/JerryJones/PacTs/

Answer 1

尝试这个

$.post('ajax.php',function(data){

   // write your retrived data here 
   $(".editArea").html(data retrived);
  //or
    $(".editArea").val(data retrived);

}

Answer 2

如果您为内容所在的部分提供唯一 ID，那会容易得多。

然后，您可以在按钮上使用 onClick() 来调用 JavaScript 函数：

function onEdit() {
    $("#EditBoxID".load('abc.php');
}

function onSave() {
    $("#ContentID").val($("#EditBoxID").val());
}