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

Posted 2023-02-22

【中文标题】使用 jquery/ajax 刷新/重新加载 Div 中的内容

【英文标题】：Refresh/reload the content in Div using jquery/ajax

【发布时间】：2013-08-31 15:39:00

【问题描述】：

我想在单击按钮时重新加载 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"> 按钮后，<div id="list">....</div> 应该会重新加载而不加载或刷新整页。

以下是我尝试过的 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  id="pickheadImage" src=""   />
                </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  id="processingStationSideImage" src=""   />
                </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  id="processingStationTopImage" src=""   />
                </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  id="cardScanImage" src=""   />
                </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" /> 按钮，应该重新加载<div id="list">... </div> 中的信息。

如果您需要更多信息，请告诉我。

【问题讨论】：

这里没有足够的细节。你想从哪里获取内容？你有什么代码可以做到这一点？有没有错误？为什么它“不起作用”？

你到底想重新加载什么？需要调用数据库吗？

#step1Content 里面是什么以及单击按钮后您希望它是什么？

问题是你如何首先填充DIV #list 内容？

【参考方案1】：

我所做的是这样的：

$('#x').html($('#x').html())

【参考方案2】：

   $("#categoryTable").load(window.location + " #categoryTable");

这里我提到了 Table Id 我加载数据和删除后的位置。我正在调用此代码，它会在不加载整个 页面 的情况下刷新数据。

【参考方案3】：

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

【参考方案4】：

当这个方法执行时，它会检索location.href的内容，然后jQuery会解析返回的文档以找到divId的元素。此元素及其内容被插入到 ID 为 result 的 ID (divId) 的元素中，其余检索到的文档将被丢弃。

$("#divId").load(location.href + " #divId>*", "");

希望这可以帮助某人理解

【参考方案5】：

$("#mydiv").load(location.href + " #mydiv");

请务必注意 second # 符号之前的空格，否则上面的代码将返回嵌套在您想要的 DIV 中的整个页面。始终留出空间。

【讨论】：

这会将 #mydiv 嵌套在 #mydiv 中，以便每次调用加载。正确的版本由胡安提供。

这不是问题所说的 AJAX。

不一定是 AJAX，但提供了预期的用户体验

是否可以在uri中包含参数？例如：$("#relation-body").load(location.href+" #relation-body?organization_id="+item.id);

这会影响 jquery 调用，因为它会在 DOM 上创建动态元素，jquery 会失败。所以在jquery中使用on事件而不是直接访问这个div中的元素

【参考方案6】：

我知道这个话题很老了，但是你可以将 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");
    );    

【参考方案7】：

您需要添加加载数据的来源。

例如：

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

希望对您有所帮助。

【参考方案8】：

试试这个

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/to/file.php

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

【参考方案9】：

$("#myDiv").load(location.href+" #myDiv>*","");

【讨论】：

请在您的回答中提供解释，这将有助于其他人理解您为什么认为这是一个很好的问题答案。

@php_coder_3809625 老实说，Peca 比 Juan 晚了几个月就回答了 :)

@Juan：你能解释一下它到底是做什么的吗？谢谢

我该如何调整它以重新加载所有孩子？

我可以使用 id 的类吗？

【参考方案10】：

我一直用这个，效果很好。

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

                        );
                    
                );
            );
        );
         );

【讨论】：

我认为您也可以删除delay，因为它会根据documentation 延迟后续调用。

哦，是的，它只是一个不错的效果！ ;)

$('#loader3', form); 包含表单？我可以删除这个吗？因为我正在使用更改方法不提交。

151291 是的，它是我的表单的ID，根据您的需要更改它。

form 是一个包装在 jquery 中的东西，你为什么要这样做 $(form).fadeOut(800, function()

【参考方案11】：

虽然您没有提供足够的信息来实际指明应该从何处提取数据，但您确实需要从某个地方提取数据。您可以在加载时指定URL，也可以定义数据参数或回调函数。

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

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

【参考方案12】：

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

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

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