如何用AJAX响应中的新内容替换和<div>的内容?</div>

时间:2014-10-09 18:23:38

标签: javascript php jquery ajax

为了您理解我的问题,我在这里只提供了必要的代码。

HTML代码:

<td style="text-align:center" id="brand_image_td_101">Some text goes here</td><!-- This is the td whose content need to be replaced with new content-->

<div id="brand_101"><!-- This is the div whose content need to be replaced with new content-->    
  <a href="#" id="promotion_status_101">
  <button type="button" class="btn btn-default brmodalbtn" data-toggle="modal" data-target="#BrandImageModal" id="101">On</button>
  </a>
</div>

点击div上方的按钮显示模态对话框,AJAX请求转到PHP页面,从那里出现错误或成功消息等等。

直到这里一切正常。我面临的问题是更换上述<div id="brand_101">的内容。我想用以下内容替换上述<div id="brand_101">的内容:

<td style="text-align:center" id="brand_image_td_101"><img src="http://web_prj.com/pqr.php/uploads/a123.jpg" width="80" height="80"></td><!-- This is the new td content-->

<div id="brand_101"><!-- This is the new div content-->
  <a href="#" id="promotion_status_101" onClick="change_promotion_status('http://web_prj.com/pqr.php', 'promotion_status', '101', '0'); return false;">
  <button type="button" class="btn btn-default">Off</button>
  </a> 
</div>

我希望在jQuery函数的成功响应中实现这一点。但我不明白我该怎么做到这一点。

以下是我写的jQuery AJAX函数:

$('#form').submit(function(e) {
  var form = $(this);
  var br_id = $('#brand_id').val();//This variable contains value 101
  var status = '0';
  var module_url = $('#module_url').val();//This variable contains value http://web_prj.com/pqr.php
  var upload_url = $('#upload_url').val();//This variable contains value http://web_prj.com/pqr.php/uploads/a123.jpg
  var formdata = false;
  if(window.FormData) {
    formdata = new FormData(form[0]);
  }

  var formAction = form.attr('action');

  $.ajax({
    type        : 'POST',
    url         : 'manufacturers.php',
    cache       : false,
    data        : formdata ? formdata : form.serialize(),
    contentType : false,
    processData : false,

    success: function(response) { 
      if(response.error == 0) {  
        $('#messages').addClass('alert alert-danger').text(response.error_message);

      } else { 
        $('#BrandImageModal').modal('hide');
        //location.reload();       
      }
    },
    dataType:"JSON"
  });
  e.preventDefault();
});

我应该如何替换使用AJAX函数中的变量值创建的新内容的内容,以便我可以获得上述内容?

1 个答案:

答案 0 :(得分:0)

也许我误解了,但你可以尝试这样的事情:

//put the following into the the success function where you want to add new content
// create an string containing the html you want to insert
var newContent = '<a href="#" id="promotion_status_101" onClick="change_promotion_status('http://web_prj.com/pqr.php', 'promotion_status', '101', '0'); return   false;"><button type="button" class="btn btn-default">Off</button></a> ';

// remove old content from the div. Now you just have an empty div
$('#branding-101').html('');
// add the new content to the div
$('#branding-101').html(newContent);

或者您是否需要从响应中提取新值?如果是这种情况,你会做同样的事情,只有通过连接响应文本中的值来构建字符串。