source

html 웹 페이지 전체를 에이잭스 응답으로 대체하는 방법은 무엇입니까?

factcode 2023. 8. 27. 09:58
반응형

html 웹 페이지 전체를 에이잭스 응답으로 대체하는 방법은 무엇입니까?

구체적인 질문을 하기 전에 몇 가지 기본적인 단계를 설명해야 합니다.

첫째, 해당 애플리케이션은 고객이 온라인으로 약속을 관리하는 것을 참조하십시오.

고객이 미용실 시술 정보를 양식에 기입하고 정보를 입력하면 확인 페이지가 나타납니다.

이제 데이터베이스에 약속을 저장하기 위해 Ajax 요청을 수행하는 페이지입니다.

모든 작업이 성공한 경우 성공 메시지와 함께 약속 세부 정보가 포함된 페이지가 표시됩니다.

문제는 현재 페이지가 응답, 즉 탭 네트워크 콘솔 브라우저에만 표시된다는 것입니다.

그래서 제 질문은 간단합니다.

저는 StackOverflow에서도 웹에서 많은 질문을 발견했습니다.하지만 이 모든 것은 디브에 대한 추가로 제한됩니다.저는 교수형을 당하지 않아도 되고 또한 교체할 필요가 있습니다.<html>페이지를 입니다.저는 이것을 어떻게 하는지 전혀 모르고 당신의 조언이 필요합니다.

완전성을 위해, 이것은 나에게 돌아오는 코드입니다. html:

       $.ajax({
          'type': 'POST',
          'url': 'backend_api/ajax_save_appointment',
          'data': postData,
          'success': function(response)
           {
               console.log(response);
           },
           'error': function(jqXHR, textStatus, errorThrown)
           {
               console.log('Error on saving appointment:', jqXHR, textStatus, errorThrown);    
           }
       });

만약 에 응에다포경우가 ,<head>그리고.<body> 태그:

$("html").html(response);.

그렇지 않고 내용만 있는 경우 다음을 수행합니다.

$("body").html(response);.

응답이 html 내용인 경우 다음 코드 줄을 사용할 수 있습니다.

...
'success': function(response)
       {
           $("body").html(response);
       }
...

업데이트:

HTML 태그를 대체하기는 어렵지만 할 수 있는 일은 다음과 같습니다.

...
'success': function(response)
       {
           $("html").html($("html", response).html());
       }
...

당신은 jquery로 응답을 구문 분석하여 html의 내용을 가져오고 현재 html의 내용을 바꿉니다.

이 질문은 이미 여기에서 처리되었습니다. HTML 페이지를 AJAX를 통해 검색된 콘텐츠로 대체합니다.

기본적으로 시도할 수 있습니다(IE에서는 작동하지 않습니다).

document.open();
document.write(newContent);
document.close();

또는, 당신이 jquery를 사용하고 있기 때문에.

$("body").html(data);

안부 전해요

다음 코드를 '성공' 기능에 사용하여 다른 경로로 리디렉션할 수 있습니다.window.location.href = 'http://host.local/path/to/remission-filename';

@Prohet 판사님은 이 목적을 위해 AJAX 요청이 필요하지 않은 것 같습니다.이런 식으로 하는 것은 이점이 없습니다.전체 페이지가 업데이트되면 일반 HTTP 요청에 의해 수행될 수 있습니다.AJAX를 사용하려면 JavaScript를 사용하여 약속 세부 정보가 포함된 새 페이지로 리디렉션하면 됩니다.

$.ajax({
   'type': 'POST',
   'url': '/backend/ajax_save_appointment',
   'data': postData,
   'success': function(response)
   {
      console.log(response);
      // redirect browser to new location
      window.location.href = '/backend/appointment_details';
   },
   'error': function(xhr, status, error)
   {
      console.log('Error on saving appointment:', xhr, status, error);
      // display error message to the user
   }
});

코멘트를 남길 만한 담당자가 부족합니다(!!). 하지만 @fribu-smart-message의 UPDATE 답변(https://stackoverflow.com/a/33914275/1428972) 은 다음을 사용하여 올바른 답변으로 표시되어야 합니다.

$("html").html($("html", response).html());

이렇게 하면 Ajax를 통해 페이지가 완전히 대체됩니다.이것은 일을 제대로 하는 반면, 다른 것들은 심지어 사용합니다."html"완전히 작동하지 않습니다.

이 게시물이 오래된 게시물인 것은 알지만 동일한 문제에 대한 제 문제를 해결했습니다!:)

언급URL : https://stackoverflow.com/questions/33914245/how-to-replace-the-entire-html-webpage-with-ajax-response

반응형