使用 jquery/ajax 刷新/重新加载 Div 中的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18490026/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Refresh/reload the content in Div using jquery/ajax
提问by UID
I want to reload a div on click of a button. I do not want to reload the full page.
我想通过单击按钮重新加载 div。我不想重新加载整个页面。
Here is my code:
这是我的代码：
HTML:
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>
On click of <input type="button" id="getCameraSerialNumbers" value="Capture Again">Button a <div id="list">....</div>should reload without loading or refreshing full page.
单击<input type="button" id="getCameraSerialNumbers" value="Capture Again">按钮 a<div id="list">....</div>应重新加载而不加载或刷新整个页面。
Below is the Jquery which I tried, but not working:-
以下是我尝试过但不起作用的 Jquery：-
$("#getCameraSerialNumbers").click(function () {
$("#step1Content").load();
});
Please suggest.
请建议。
Here is the DIV on my page, which contains Pictures and Serial numbers of some products... Which will be coming from database 1st time on the Page Load. But Is User faces some issue he'll click tthe "Capture Again" button "<input type="button" id="getCameraSerialNumbers" value="Capture Again">" which will load those information again.
这是我页面上的 DIV，其中包含一些产品的图片和序列号...这些将在页面加载时第一次来自数据库。但是用户是否面临一些问题，他将单击“再次捕获”按钮“ <input type="button" id="getCameraSerialNumbers" value="Capture Again">”，这将再次加载这些信息。
The HTML Code of Div:-
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>
Now on click of <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />button, the information which is in <div id="list">... </div>should be loaded again.
现在单击<input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />按钮，<div id="list">... </div>应再次加载其中的信息。
Please let me know if you need some more information.
如果您需要更多信息，请告诉我。
采纳答案by Gucho Ca
I always use this, works perfect.
我一直用这个，完美。
$(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);
});
}
});
});
});
});
回答by Peca
$("#mydiv").load(location.href + " #mydiv");
Always take note of the space just before the second#sign, otherwise the above code will return the whole page nested inside you intended DIV. Always put space.
始终注意第二个#符号之前的空格，否则上面的代码将返回嵌套在您想要的 DIV 中的整个页面。总是放空间。
回答by Juan Manuel PRONEXO De Castro
$("#myDiv").load(location.href+" #myDiv>*","");
回答by Sachin Sudhakar Sonawane
When this method executes, it retrieves the content of location.href, but then jQuery parses the returned document to find the element with divId. This element, along with its contents, is inserted into the element with an ID (divId) of result, and the rest of the retrieved document is discarded.
当此方法执行时，它检索 的内容location.href，但随后 jQuery 解析返回的文档以查找带有 的元素divId。该元素及其内容被插入到 ID ( divId) 为 result的元素中，并丢弃检索到的文档的其余部分。
$("#divId").load(location.href + " #divId>*", "");
$("#divId").load(location.href + " #divId>*", "");
hope this may help someone to understand
希望这可以帮助某人理解
回答by Sachin Sudhakar Sonawane
What you want is to load the data again but not reload the div.
您想要的是再次加载数据但不重新加载 div。
You need to make an Ajax query to get data from the server and fill the DIV.
您需要进行 Ajax 查询以从服务器获取数据并填充 DIV。
回答by David L
While you haven't provided enough information to actually indicate WHERE you should be pulling data from, you do need to pull it from somewhere. You can specify the URL in load, as well as define data parameters or a callback function.
虽然您没有提供足够的信息来实际指示您应该从何处提取数据，但您确实需要从某个地方提取数据。您可以在加载中指定 URL，也可以定义数据参数或回调函数。
$("#getCameraSerialNumbers").click(function () {
$("#step1Content").load('YourUrl');
});
回答by daulat
Try this
尝试这个
html code
html代码
<div id="refresh">
<input type="text" />
<input type="button" id="click" />
</div>
jQuery code
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 page code path=/path/to/file.php
php页面代码路径=/path/to/file.php
<?php
header('Content-Type: application/json');
$done=true;
if($done){
echo json_encode(['success'=>'ok']);
}
?>
回答by Shubham Kumar
You need to add the source from where you're loading the data.
您需要从加载数据的位置添加源。
For Example:
例如：
$("#step1Content").load("yourpage.html");
Hope It will help you.
希望它会帮助你。
回答by Elneto
I know the topic is old, but you can declare the Ajax as a variable, then use a function to call the variable on the desired content. Keep in mind you are calling what you have in the Ajax if you want a different elements from the Ajax you need to specify it.
我知道这个话题很老，但是您可以将 Ajax 声明为变量，然后使用函数调用所需内容上的变量。请记住，如果您想要与需要指定的 Ajax 不同的元素，那么您正在调用 Ajax 中的内容。
Example:
例子：
Var infogen = $.ajax({'your query')};
$("#refresh").click(function(){
infogen;
console.log("to verify");
});
Hope helps
希望有帮助
if not try:
如果不尝试：
$("#refresh").click(function(){
loca.tion.reload();
console.log("to verify");
});
