使用jquery/ajax刷新/重新加载div中的内容

Question

我想单击按钮重新加载div。我不想重新加载整个页面。

这里是我的代码：

HTML：

<div role="button" class="marginTop50 marginBottom"> 
    <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" /> 
    <input type="button" id="confirmNext" value="Confirm & Proceed" class="disabled marginLeft50" /> 
</div> 

在<input type="button" id="getCameraSerialNumbers" value="Capture Again">按钮的点击一个<div id="list">....</div>应该重新加载不加载或刷新整个页面。

下面是我试过了jQuery，但不工作： -

$("#getCameraSerialNumbers").click(function() { 
    $("#step1Content").load(); 
}); 

请建议。

这是我的页面上的DIV，其中包含某些产品的图片和序列号......这将在数据库第一次来自页面加载。但是用户面临一些问题，他会点击“Capture Again”按钮“<input type="button" id="getCameraSerialNumbers" value="Capture Again">”，这将再次加载这些信息。

div的HTML代码： -

<div id="step1Content" role="Step1ShowCameraCaptures" class="marginLeft"> 

<form> 
    <h1>Camera Configuration</h1> 
    <!-- Step 1.1 - Image Captures Confirmation--> 
    <div id="list"> 
     <div> 
      <p> 
       <a id="pickheadImageLightBox" data-lightbox="image-1" title="" href=""> 
        <img alt="" id="pickheadImage" src="" width="250" height="200" /> 
       </a> 
      </p> 
      <p> 
       <strong>Pickhead Camera Serial No:</strong><br /> 
       <span id="pickheadImageDetails"></span> 
      </p> 
     </div> 
     <div> 
      <p> 
       <a id="processingStationSideImageLightBox" data-lightbox="image-1" title="" href=""> 
        <img alt="" id="processingStationSideImage" src="" width="250" height="200" /> 
       </a> 
      </p> 
      <p> 
       <strong>Processing Station Top Camera Serial No:</strong><br /> 
       <span id="processingStationSideImageDetails"></span> 
      </p> 
     </div> 
     <div> 
      <p> 
       <a id="processingStationTopImageLightBox" data-lightbox="image-1" title="" href=""> 
        <img alt="" id="processingStationTopImage" src="" width="250" height="200" /> 
       </a> 
      </p> 
      <p> 
       <strong>Processing Station Side Camera Serial No:</strong><br /> 
       <span id="processingStationTopImageDetails"></span> 
      </p> 
     </div> 
     <div> 
      <p> 
       <a id="cardScanImageLightBox" data-lightbox="image-1" title="" href=""> 
        <img alt="" id="cardScanImage" src="" width="250" height="200" /> 
       </a> 
      </p> 
      <p> 
       <strong>Card Scan Camera Serial No:</strong><br /> 
       <span id="cardScanImageDetails"></span> 
      </p> 

     </div> 
    </div> 
    <div class="clearall"></div> 

    <div class="marginTop50"> 
     <p><input type="radio" name="radio1" id="optionYes" />Yes, the infomation captured is correct.</p> 
     <p><input type="radio" name="radio1" id="optionNo" />No, Please capture again.</p> 
    </div> 
    <div role="button" class="marginTop50 marginBottom"> 
     <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" /> 
     <input type="button" id="confirmNext" value="Confirm & Proceed" class="disabled marginLeft50" /> 
    </div> 
</form> 

现在上<input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />按钮，这是<div id="list">... </div>应重新加载信息的点击。

如果您需要更多信息，请让我知道。

Answer 1

我一直用这个，可以完美运行。

$(document).ready(function(){ 
     $(function(){ 
     $('#ideal_form').submit(function(e){ 
       e.preventDefault(); 
       var form = $(this); 
       var post_url = form.attr('action'); 
       var post_data = form.serialize(); 
       $('#loader3', form).html('<img src="../../images/ajax-loader.gif" />  Please wait...'); 
       $.ajax({ 
        type: 'POST', 
        url: post_url, 
        data: post_data, 
        success: function(msg) { 
         $(form).fadeOut(800, function(){ 
          form.html(msg).fadeIn().delay(2000); 

         }); 
        } 
       }); 
      }); 
     }); 
     }); 

Answer 2

你想要的是再次加载数据，但不能重新加载div。

您需要进行Ajax查询才能从服务器获取数据并填充DIV。

http://api.jquery.com/jQuery.ajax/

Answer 3

虽然您没有提供足够的信息来实际表示，你应该从提取数据，你需要从什么地方把它。您可以在加载中指定URL，以及定义数据参数或回调函数。

$("#getCameraSerialNumbers").click(function() { 
    $("#step1Content").load('YourUrl'); 
}); 

http://api.jquery.com/load/

Answer 4

$("#myDiv").load(location.href+" #myDiv>*",""); 

Answer 5

$("#mydiv").load(location.href + " #mydiv"); 

Answer 6

尝试此

HTML代码

<div id="refresh"> 
    <input type="text" /> 
    <input type="button" id="click" /> 
</div> 

jQuery代码

<script> 
    $('#click').click(function(){ 
    var div=$('#refresh').html(); 
    $.ajax({ 
     url: '/path/to/file.php', 
     type: 'POST', 
     dataType: 'json', 
     data: {param1: 'value1'}, 
    }) 
    .done(function(data) { 
if(data.success=='ok'){ 
     $('#refresh').html(div); 
}else{ 
// show errors. 
} 
    }) 
    .fail(function() { 
     console.log("error"); 
    }) 
    .always(function() { 
     console.log("complete"); 
    }); 
    }); 

</script> 

PHP页面代码路径= /路径/吨O /文件。PHP

<?php 
    header('Content-Type: application/json'); 
    $done=true; 
    if($done){ 
     echo json_encode(['success'=>'ok']); 
    } 
?> 

Answer 7

当这种方法执行，它将检索的location.href的内容，但随后的jQuery解析返回的文档找到与divId的元素。将此元素及其内容插入到带有结果ID（divId）的元素中，并且丢弃检索到的文档的其余部分。

$（“＃divId”）。load（location.href +“#divId> *”，“”）;

希望这可以帮助别人了解

Answer 8

您需要添加从正在加载数据，其中源。

例如：

$("#step1Content").load("yourpage.html"); 

我想你应该在Auto Load and Refresh Div on Ajax Call Without Reloading Page using jQuery

希望这将有助于你访问这个页面。