AJAX 응답을 HTML 페이지에 삽입하는 방법은 무엇입니까?

-1

AJAX 요청이있을 때 함수를 호출하려고합니다. 난 그냥 버튼 아래에 주입 할 수 (있는 GetData의 함수가 호출) function1이 실행해야하고, 응답을AJAX 응답을 HTML 페이지에 삽입하는 방법은 무엇입니까?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.NextPage').click(function() { 
       $.ajax({ 
        url: 'test.php', 
        data: {x: 1}, 
        type: 'POST', 
        dataType: 'JSON', 
        success: function(response) { 
         // do not want any alerts or notifications here 
        } 

       }); 

      }); 
     }); 
    </script> 
</head> 
<body> 

    <button type="button" class="NextPage">go to nextpage</button> 

    <?php 
    if (isset($_POST['x'])) { 
     if ($_POST['x'] == 1) { 
      function1(); 
      } 
    } 

    function function1() { 
     // this is a sample of what im trying to do in this function 
     global $resultNUM; 
     global $recordsPerPage; 
     global $var; 
     global $i; 
     global $searchid; 
     if ($resultNUM > $recordsPerPage * i) { 
      $nexturl = "something"; 
      $firstloop=false; 
      getdata($nexturl, $var,$firstloop); 
      $i++; 
     } else { 
      echo "end of results"; 
     } 
    } 

    ?> 
</body>

이 지금까지 내 코드입니다.

if ($_POST["action"] == "function1") 
    function1();

그리고 당신의 AJAX 호출에서

가 다음을 수행하십시오 :

출처

2014-05-18 user3622910

간단한 페이지를 원한다면'document.write (response);'를 사용해보십시오. 간단한 echo를보실 수 있습니다. – user1978142

@kevinabelita echo는 그냥 example.plz였습니다. 다시 한번 질문 해주세요. function1을 수정했습니다. – user3622910

다른 답변의 댓글 스레드에서 보이는 것처럼 대부분의 코드가 작동하고 있습니다. 귀하의 AJAX 요청은 클라이언트 측에서 이루어지며, 서버에 의해 수신되고 응답은 브라우저로 돌아옵니다. 따라서 텍스트 또는 HTML 응답을 다시 페이지에 삽입하는 방법이 필요합니다.

페이지가 이미 렌더링되었으므로 표준 방식으로 페이지에 쓸 수 없습니다. 그러나 JavaScript를 사용하면 프로그래밍 방식으로 화면의 요소를 수정할 수있는 "Document Object Model"(또는 DOM)에 액세스 할 수 있습니다.

, 액션에서 볼 따라서, 귀하의 버튼 후 새 섹션을 추가하려면 :

<button type="button" class="NextPage">go to nextpage</button> 
<div id="result"></div>

을 이제 당신의 성공 처리기에서 다시 페이지에 응답을 주입.

success: function(response) { 
    $('#result').text(response); 
}

는 HTML 태그를 포함하는 경우, html() 대신 text() 사용이 jQuery 코드는 결과가 단지 텍스트 가정합니다.

그래서 여기서 무엇이 일어나고 있습니까? 우리는 # 접두사를 사용하여 id 요소를 선택했으며, $() 구조는 jQuery 요소 객체를 생성합니다 (존재하는 한 - 우리는 알고 있음). 이렇게하면 해당 클래스의 메소드에 액세스 할 수있게되어 매뉴얼에 문서화되어 있습니다.

출처

2014-05-18 19:22:20 halfer

이것을 명확히 해 주셔서 감사합니다. – user3622910

당신은 당신의 PHP 코드 같은 것을 할 수

data: {action: 'function1'}, 
success: function(response) { 
    // do not want any alerts or notifications here 
}

하지만 난 당신이 이미하고있는 것을 알 수있다. 따라서 function1()에는 작은 라인을 추가하십시오. 그 라인은 OK입니다. 이렇게하면 함수가 성공적으로 실행되었음을 PHP 스크립트에서 확인할 수 있습니다.

출처

2014-05-18 09:43:18

고맙습니다. 당신의 제안을 시도했지만 여전히 아무것도 얻지 못합니다. – user3622910

@ user3622910 : AJAX 작동이 작동하는지 확인해야합니다. 브라우저의 라이브 AJAX 뷰어에서 작동하는지 확인하십시오. (일반적으로 무언가가 효과가 없다면 할 수있는 한 많은 정보를 제공하는 것이 가장 좋습니다. 그렇지 않으면 도움을 줄 수있는 사람이 아무 것도 할 수 없습니다.) – halfer

@halfer 경고를 추가했습니다 ("working"); 성공 : 기능 (응답)과 나는 alert.so AJAX가 작동하고 있습니다.하지만 나는 아무것도 얻지 못했습니다 function1.please 가이드에서 나에게 무슨 일이 일어나고 있는지 이해합니다. – user3622910

AJAX 응답을 HTML 페이지에 삽입하는 방법은 무엇입니까?

답변

관련 문제