我想在點擊按鈕時重新加載一個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>單擊& ltinput type = " button " id = " getCameraSerialNumbers " value = " Capture Again " & gt；按鈕a & ltdiv id = " list " & gt....& lt/div & gt；應該重新加載，而不加載或刷新整個頁面。
下面是我嘗試過的Jquery，但是不起作用
$("#getCameraSerialNumbers").click(function () {
$("#step1Content").load();
});請建議。
這是我的頁面上的DIV，它包含一些產品的圖片和序列號...它將在頁面加載時第一次來自數據庫。但是如果用戶遇到一些問題，他將單擊“再次捕獲”按鈕。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>現在點擊& ltinput type = " button " id = " getCameraSerialNumbers " value = " Capture Again " class = " disabled "/& gt；按鈕，信息在& ltdiv id = " list " & gt...& lt/div & gt；應該再裝一次。
如果你需要更多的信息，請告訴我。
始終注意第二個#符號前的空格，否則上面的代碼將返回嵌套在您想要的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="../../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);
});
}
});
});
});
});當這個方法執行時，它檢索location.href的內容，但是jQuery解析返回的文檔來查找帶有divId的元素。這個元素及其內容被插入到ID為result(divId)的元素中，檢索到的文檔的其余部分被丟棄。
$("#divId ")。load(location.href + " #divId>* "，" ")；
希望這能幫助人們理解
雖然您還沒有提供足夠的信息來指出應該從哪里提取數據，但是您確實需要從某個地方提取數據。您可以在load中指定URL，也可以定義數據參數或回調函數。
$("#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/to/file.php
<?php
header('Content-Type: application/json');
$done=true;
if($done){
echo json_encode(['success'=>'ok']);
}
?>您需要從加載數據的地方添加數據源。
例如:
$("#step1Content").load("yourpage.html");希望對你有幫助。
我知道這個話題已經過時了，但是您可以將Ajax聲明為一個變量，然后使用一個函數來調用所需內容的變量。記住，如果你想要一個不同于Ajax的元素，你需要指定它。
示例:
Var infogen = $.ajax({'your query')};
$("#refresh").click(function(){
infogen;
console.log("to verify");
});希望有幫助
如果沒有，請嘗試:
$("#refresh").click(function(){
loca.tion.reload();
console.log("to verify");
});這里我提到了表Id，在這里我加載數據并在刪除之后。我正在調用這個代碼，它將刷新數據，而不需要加載整個頁面。
我所做的是這樣的:
$('#x').html($('#x').html())這是我們將路由名傳遞給jquery的方式
var url = ' {{ route ("admin.task.delete", ":id") }}';
url = url.replace(':id',id);然后像這樣使用url變量
$.ajax({
url: url,和ajax的其余部分