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

我想单击一个button重新加载一个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">buttona <div id="list">....</div>不需要加载或刷新整个页面。

下面是我试过的Jquery,但不工作:

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

请build议。

这里是我的页面上的DIV,其中包含一些产品的图片和序列号…哪些将在数据库第一次来自页面加载。 但是用户面临一些问题,他会点击“Capture Again”button“ <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" /> button, <div id="list">... </div>应该再次加载。

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

我总是使用这个,完美的作品。

 $(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="../..http://img.dovov.comajax-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); }); } }); }); }); }); 
 $("#mydiv").load(location.href + " #mydiv"); 
 $("#myDiv").load(location.href+" #myDiv>*",""); 

当这个方法执行时,它检索location.href的内容,但是jQueryparsing返回的文档以finddivId的元素。 将此元素及其内容插入到具有结果ID( divId )的元素中,并将其余部分丢弃。

$(“#divId”)。load(location.href +“#divId> *”,“”);

希望这可以帮助别人理解

虽然您没有提供足够的信息来实际指示您应该从哪里提取数据,但您确实需要将其从某处拉出。 您可以在加载中指定URL,以及定义数据参数或callback函数。

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

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

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

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

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

尝试这个

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页面代码path= /path/到/ file.php

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

您需要从您加载数据的位置添加源代码。

例如:

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

我想你应该访问这个页面上的自动加载和刷新Ajax无需重新加载页面使用jQuery

希望它会帮助你。