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">按钮 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> 应再次加载其中的信息。

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

score 134 · Accepted Answer

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

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

score 76 · Accepted Answer

76

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

于 2014-08-19T00:03:17.433 回答

score 45 · Accepted Answer

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

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

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

score 17 · Accepted Answer

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

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

希望这可以帮助某人理解

score 7 · Accepted Answer

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

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

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

score 7 · Accepted Answer

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

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

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

score 5 · Accepted Answer

试试这个

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']);
   }
?>

score 2 · Accepted Answer

您需要从加载数据的位置添加源。

例如：

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

希望它会帮助你。

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

0

我所做的是这样的：

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

于 2021-11-11T06:48:33.303 回答

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

12 回答 12

Related

Reference