如何在ajax调用后更新div标签?

时间:2016-12-01 18:56:36

标签: php jquery

我有多个按钮的脚本,点击时通过AJAX运行php脚本。我现在想用div按钮显示结果。我试过这个和父母但是都没有工作。

以下示例:点击.showme时,我希望结果显示在同一个父级内的#here div中。

$(document).ready(function() {
  $('.showme').bind('click', function() {

    var id = $(this).attr("id");
    var num = $(this).attr("class");
    var poststr = "request=" + num + "&moreinfo=" + id;
    $.ajax({
      url: "../../assets/php/testme.php",
      cache: 0,
      data: poststr,
      success: function(result) {
        $(this).getElementById("here").innerHTML = result;
      }
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='request_1 showme' id='rating_1'>More stuff 1
  <div id="here"></div>
</div>
<div class='request_2 showme' id='rating_2'>More stuff 2
  <div id="here"></div>
</div>
<div class='request_3 showme' id='rating_3'>More stuff 3
  <div id="here"></div>
</div>

1 个答案:

答案 0 :(得分:0)

我认为这样做:

$(document).ready(function () {
    $('.showme').bind('click', function () {

        //keep the element reference in a variable to use in ajax success
        var _this = $(this);

        var id = $(this).attr("id");
        var num = $(this).attr("class");
        var poststr = "request=" + num + "&moreinfo=" + id;
        $.ajax({
            url: "../../assets/php/testme.php",
            cache: 0,
            data: poststr,
            success: function (result) {
                //use the element reference you kept in variable before ajax call instead of $(this)
                //also use jQuery style, getElementById is undefined if you call after $(this)
                //.find() will call it's child in any level, also better you use classes instead of using same id multiple times
                _this.find("#here").html(result);
            }
        });
    });
});