jquery/ajax를 사용하여 Div의 콘텐츠 새로 고침/재로드

jquery/ajax를 사용하여 Div의 콘텐츠 새로 고침/재로드

버튼을 클릭해서 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">" 이 정보를 다시 로드합니다.

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

다음 버튼을 클릭해 주세요.<input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />버튼, 에 있는 정보<div id="list">... </div>다시 로드해야 합니다.

더 필요한 정보가 있으면 알려주세요.

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

두 번째 # 기호 바로 앞에 있는 공백에 항상 주의하십시오.그렇지 않으면 위의 코드는 원하는 DIV 내부에 중첩된 페이지 전체를 반환합니다.항상 띄어쓰세요.

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

난 항상 이걸 쓰고, 완벽하게 작동해.

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

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

이 메서드가 실행되면 다음 내용을 가져옵니다.location.href단, jQuery는 반환된 문서를 해석하여 요소를 찾습니다.divId이 요소는 그 내용과 함께 ID로 요소에 삽입됩니다.divId검색된 문서의 나머지 부분은 파기됩니다.

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

이것이 이해에 도움이 되기를 바란다

실제로 데이터를 어디서 가져와야 하는지를 나타낼 만큼 충분한 정보를 제공하지 못했지만, 어딘가에서 데이터를 가져와야 합니다.로드 중인 URL을 지정할 수 있으며 데이터 파라미터 또는 콜백함수를 정의할 수도 있습니다.

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

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

데이터를 다시 로드하되 div를 다시 로드하지 않는 것이 좋습니다.

서버에서 데이터를 가져와 DIV를 채우려면 Ajax 쿼리를 만들어야 합니다.

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

이거 드셔보세요

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

데이터를 로드할 소스를 추가해야 합니다.

예:

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

도움이 되길 바랍니다.

토픽이 오래된 것은 알지만 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");
    });    

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

여기에서는 데이터를 로드하는 Table Id와 삭제 후의 Table Id를 언급했습니다.이 코드를 호출하면 전체 페이지가 로드되지 않고 데이터가 새로 고쳐집니다.

제가 한 일은 다음과 같습니다.

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

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

언급URL : https://stackoverflow.com/questions/18490026/refresh-reload-the-content-in-div-using-jquery-ajax