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

IT技术 javascript jquery html css ajax
2021-02-09 00:02:30

我想通过单击按钮重新加载 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">按钮 a<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 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" />按钮，<div id="list">... </div> 应再次加载其中的信息。

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

6个回答
$("#mydiv").load(location.href + " #mydiv");

始终注意第二个 #符号之前的空格，否则上面的代码将返回嵌套在您想要的 DIV 中的整个页面。总是放空间。

这会影响 jquery 调用，因为它在 DOM 上创建动态元素，jquery 失败。所以on在jquery中使用事件而不是直接访问这个div里面的元素
2021-03-21 00:02:30
这会在每次加载调用时将 #mydiv 嵌套在 #mydiv 中。Juan 提供了正确的版本。
2021-03-28 00:02:30
这不是问题所说的 AJAX。
2021-03-28 00:02:30
它不一定是 AJAX，但提供了预期的用户体验
2021-04-09 00:02:30
可以在uri中包含参数吗？例如： $("#relation-body").load(location.href+" #relation-body?organization_id="+item.id);
2021-04-09 00:02:30 
$("#myDiv").load(location.href+" #myDiv>*","");
请在您的答案中提供解释，这将有助于其他人理解为什么您认为这是对问题的一个很好的答案。
2021-03-16 00:02:30
我将如何调整它以重新加载所有孩子？
2021-03-27 00:02:30
我可以使用 id 的类吗？
2021-04-02 00:02:30
@Juan：你能解释一下它到底是做什么的吗？谢谢
2021-04-07 00:02:30
@php_coder_3809625 老实说，Peca 在 Juan 几个月后回答了:)
2021-04-08 00:02:30

我一直用这个，完美。

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

                        });
                    }
                });
            });
        });
         });
151291 是的，它是我表单的 ID，根据您的需要更改它。
2021-03-17 00:02:30
form 是一个包裹在 jquery 中的，所以你为什么这样做 $(form).fadeOut(800, function(){
2021-03-26 00:02:30
我认为您也可以删除delay它，因为根据文档，它会延迟后续调用。
2021-03-28 00:02:30
哦是的，它只是一个很好的效果！;)
2021-04-01 00:02:30
$('#loader3', form);包含形式？我可以删除这个吗？因为我正在使用更改方法而不是提交。
2021-04-07 00:02:30

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

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

希望这可以帮助某人理解

您想要的是再次加载数据但不重新加载 div。

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

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

其它你可能感兴趣的问题
上一篇IE 中的下拉列表宽度 下一篇Firebase 权限被拒绝