AJAX를 사용하여 html-don에서 검색 한 데이터를 표시하는 방법?

Question

나는 3 개의 파일을 가지고 있습니다 : index.html, parse.php, profile.html

index.html :이 파일에는 form.html과 html-dom 구문 분석이 포함 된 양식이 있습니다. PHP, 나는 index.html과 같은 페이지에서 모든 데이터를 가져와야합니다.

저는 AJAX를 처음 사용하며 지금까지 사용하지 않았습니다.

작업을 어떻게해야합니까?

index.html을 :

<form action="parse.php" method="post" id="myForm"> 
Name: <input type="text" name="uurl"><br> 
<input type="submit"> 
</form> 

parse.php :

require 'simple_html_dom.php'; 
$url = $_POST['uurl']; 

$html = file_get_html($url); 

foreach ($html->find("span[class=full-name]") as $key => $name){ 
echo $name."<br>"; 

} 

스크립트

<script> 

     $(document).ready(function() { 

      $('#myForm').ajaxForm(function() { 
       alert("Thank you for your comment!"); 
      }); 
     }); 
    </script> 

Answer 1

index.html을 :

<form action="parse.php" id="myform" method="post"> 
Name: <input type="text" name="uurl" id="uurl"><br> 
<input type="button" value="" > 
</form> 

<ul class="results"></ul> 

JQuery와 스크립트 태그를 포함, 다음과 같은 자바 스크립트 코드를 추가합니다 parse.php에서

$(document).ready(function() { 
    $('#myform button').on('click', function() { 
     $.getJSON('/parse.php', { uurl: $('#uurl').val() }).done(function(a) { 
      var html = ''; 
      if (a.results && a.results.length > 0) { 
       for (var i in a.results) { 
        html += '<li>' + a.results[i] + '</li>'; 
       } 
      } else { 
       html += '<li class="error">No Results Found</li>'; 
      } 
      $('ul.results').html(html); 
     }); 
    }); 
}); 

을 :

require 'simple_html_dom.php'; 
$url = $_POST['uurl']; 

$results = array(); 
$html = file_get_html($url); 
foreach ($html->find("span[class=full-name]") as $key => $name){ 
    $results[] = $name; 
} 

echo json_encode(array('results' => $results)); 

Answer 2

을 따라서 기술적으로도 AJAX를 사용하고 있지 않습니다. Ajax는 자바 스크립트를 기반으로하며 코드에 자바 스크립트가 표시되지 않습니다.

또한, 내가 이해하는 바에 따르면, PHP 코드가 필요하지 않습니다.

다음은 어떻게 수행할까요? 이것은 HTML이 될 것입니다.

<form action="parse.php" method="post"> 
Name: <input type="text" name="uurl" id="uurl"><br> 
<input type="submit" id="submit-form"> 
</form> 

<div id="container"> 
</div> 

그리고 당신이 자바 스크립트 필요가있을 것이다 : 나는 명확성을 위해 jQuery를 사용하고

var $url = $('#uurl'); 
var $button = $('#submit-form'); 
var $container = $('#container'); 

$button.on('submit', function(evt){ 
    evt.preventDefault(); //to prevent the default form submission. 
    $.get($url.val(), function(response){ 
     $container.html(response); 
    }) 
}); 

을하지만, 그것은 확실히 필요하지 않습니다.