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

Question

我想在点击按钮时重新加载一个 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 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>中的信息应该重新加载。

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

Answer 1

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

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