使用 jquery/ajax 刷新/重新加载 Div 中的内容 [英] Refresh/reload the content in Div using jquery/ajax

查看：54
本文介绍了使用 jquery/ajax 刷新/重新加载 Div 中的内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想通过单击按钮重新加载 div.我不想重新加载整个页面.

这是我的代码:

HTML:

<input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled"/><input type="button" id="confirmNext" value="Confirm & Proceed" class="disabled marginLeft50"/>

点击 按钮一个

....</div> 应该重新加载而不加载或刷新整个页面.

以下是我尝试过但不起作用的 Jquery:-

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

请提出建议.

这是我页面上的 DIV，其中包含一些产品的图片和序列号...这些将在页面加载时第一次来自数据库.但是用户是否面临一些问题，他会单击再次捕获"按钮<input type="button" id="getCameraSerialNumbers" value="Capture Again">"，这将加载这些再次提供信息.

Div 的 HTML 代码:-

<表格><h1>相机配置</h1><!-- 步骤 1.1 - 图像捕获确认--><div id="列表"><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 序列号:</strong><br/><span id="pickheadImageDetails"></span></p>
<div><p><a id="processingStationSideImageLightBox" data-lightbox="image-1" title="" href=""><img alt="" id="processingStationSideImage" src="" width="250" height="200"/></a></p><p><strong>处理站顶部相机序列号:</strong><br/><span id="processingStationSideImageDetails"></span></p>

<div><p><a id="processingStationTopImageLightBox" data-lightbox="image-1" title="" href=""><img alt="" id="processingStationTopImage" src="" width="250" height="200"/></a></p><p><strong>处理站侧摄像头序列号:</strong><br/><span id="processingStationTopImageDetails"></span></p>

<div><p><a id="cardScanImageLightBox" data-lightbox="image-1" title="" href=""><img alt="" id="cardScanImage" src="" width="250" height="200"/></a></p><p><strong>卡片扫描相机序列号:</strong><br/><span id="cardScanImageDetails"></span></p>

<div class="clearall"></div><div class="marginTop50"><p><input type="radio" name="radio1" id="optionYes"/>是的，捕获的信息是正确的.</p><p><input type="radio" name="radio1" id="optionNo"/>否，请重新捕获.</p>

<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"/>

</表单>

现在点击<input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled"/> 按钮，中的信息><div id="list">... </div> 应该再次加载.

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

解决方案

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

$(document).ready(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"/>请稍等...');$.ajax({类型:'POST'，网址:post_url，数据:post_data，成功:功能(味精){$(form).fadeOut(800, function(){form.html(msg).fadeIn().delay(2000);});}});});});});

I want to reload a div on click of a button. I do not want to reload the full page.

Here is my code:

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.

Below is the Jquery which I tried, but not working:-

$("#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.

The HTML Code of Div:-

<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.

Please let me know if you need some more information.

解决方案

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

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

这篇关于使用 jquery/ajax 刷新/重新加载 Div 中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆