使用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'); });
尝试这个
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
希望它会帮助你。
