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

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

这是我的密码：

HTML:

请建议

这是我页面上的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>

摄像机配置



拾取头摄像头序列号：





处理站顶部摄像头序列号：





处理站侧摄像头序列号：





卡扫描摄像机序列号：


是的，捕获的信息是正确的

不，请再拍一次

现在，单击

按钮，

中的信息应再次加载

如果您需要更多信息，请告诉我。
您想要的是再次加载数据，而不是重新加载div

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

虽然您没有提供足够的信息来实际指示应从何处提取数据，但您确实需要从何处提取数据。您可以在load中指定URL，还可以定义数据参数或回调函数

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

我总是用这个，效果很好

$(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);

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

$（文档）.ready（函数（）{
$（函数（）{
$（'理想表格'）。提交（函数（e）{
e、 预防默认值（）；
变量形式=$（此）；
var post_url=form.attr（'action'）；
var post_data=form.serialize（）；
$（'loader3'，form）.html（'Please wait…'）；
$.ajax({
键入：“POST”，
url:post_url，
数据：post_数据，
成功：功能（msg）{
$（form）.fadeOut（800，function（）{
html（msg.fadeIn（）.delay（2000）；
});
}
});
});
});
});

始终记下第二个#符号前的空格，否则上述代码将返回嵌套在所需DIV中的整个页面。始终放空格。
尝试此操作

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>


$（'#click'）。单击（函数（）{
var div=$（'#refresh'）.html（）；
$.ajax({
url:“/path/to/file.php”，
键入：“POST”，
数据类型：“json”，
数据：{param1:'value1'}，
})
.完成（功能（数据）{
如果（data.success=='ok'）{
$（'#refresh'）.html（div）；
}否则{
//显示错误。
}
})
.fail（函数（）{
控制台日志（“错误”）；
})
.always（函数（）{
控制台日志（“完成”）；
});
});

php页面代码路径=/path/to/file.php

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

当执行此方法时，它检索
location.href
的内容，但随后jQuery解析返回的文档以查找具有
divId
的元素。该元素及其内容被插入到带有result的ID（
divId
）的元素中，其余检索到的文档被丢弃

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

希望这可以帮助其他人理解
您需要添加从何处加载数据的源

例如：

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

希望它能帮助你
 我知道这个主题很古老，但是您可以将Ajax声明为变量，然后使用函数调用所需内容上的变量。请记住，如果您希望使用不同于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");
    });    

这里没有足够的细节。你想从哪里获取内容？你有什么代码来做这件事？有什么错误吗？为什么它“不工作”？你到底想重新加载什么？您需要调用数据库吗？step1Content中的内容是什么？单击按钮后，您希望它是什么？问题是如何首先填充DIV#list内容？请在回答时提供解释，这将帮助其他人理解您为什么认为这是一个很好的问题。@php#u coder#3809625老实说，胡安几个月后，佩卡回答说：）@胡安：你能解释一下它的确切功能吗。thanksHow我会调整它以同时重新加载所有子项吗？我可以使用class而不是id吗？我想你也可以删除
延迟
，因为它会延迟后续调用。哦，是的，这只是一个很好的效果！；）<代码>$（“#loader3”，表格）包含表单？我能把这个拿走吗？因为我使用的是change Method not submit.151291是的，这是我表单的ID，请根据您的需要进行更改。
表单
是包装在jquery中的，那么您为什么要使用
$（表单）。淡出（800，函数（）{
这会为每次加载调用在#mydiv中嵌套一个#mydiv。正确的版本由Juan提供。这不是问题所说的AJAX。它不一定是AJAX，但提供了预期的用户体验uri中是否可以包含参数？例如：
$(
<?php
   header('Content-Type: application/json');
   $done=true;
   if($done){
       echo json_encode(['success'=>'ok']);
   }
?>

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

Var infogen = $.ajax({'your query')};

$("#refresh").click(function(){
  infogen;
  console.log("to verify");
});    

$("#refresh").click(function(){
      loca.tion.reload();
      console.log("to verify");
    });    

$(document).ready(function() {
var pageRefresh = 5000; //5 s
    setInterval(function() {
        refresh();
    }, pageRefresh);
});

// Functions

function refresh() {
    $('#div1').load(location.href + " #div1");
    $('#div2').load(location.href + " #div2");
}