단어가 데이터베이스에 정의 된 경우 html 페이지에서 단어 강조 표시

Question

멀티미디어 사전 시스템을 개발 중입니다. 아이디어는 웹 페이지에서 단어를 모르는 경우 단어를 두 번 클릭하면 사전이 나옵니다.

사전은 google's dictionary for chrome과 다르며 멀티미디어가 포함되어 있으며 다국어로되어 있으며 단어의 단순한 의미를 넘어서는 보충 정보가 포함되어 있습니다.

우리의 문제는 다음과 같습니다. 데이터베이스의 웹에있는 모든 페이지의 모든 단어를 정의 할 수는 없습니다. 즉, 페이지의 많은 단어가 정의되지 않을 수 있습니다. 사용자가 정의가 있는지 단어를 두 번 클릭하는 대신, 페이지가로드 될 때 페이지의 단어가 정의 된 데이터베이스를 확인하고자합니다. 그런 다음 웹 페이지에서 정의 된 단어를 강조 표시하여 독자가 정의 된 단어를 볼 수 있습니다.

팝업이 대부분 우리가 원하는 방식으로 작동합니다. 문제는 우리가 여기에

<span class="dict">consetetur</span>

할 수없는 의미, 우리가 (예를 들면 우리는 브라우저 확장 우리의 시스템을 개발하는 경우와 같이) 페이지 소유자가 아닌 경우 웹 페이지에 일을 가지고 무엇을 것입니다 우리 지금까지 Chrome에서 수행 된 작업 - gwizz demo page. 보안을 클릭하면 서버가 안전하지 않습니다.

페이지에서 대부분의 단어가 정의되어 있으므로 단어를 두 번 클릭하면 팝업이 표시됩니다. 그러나 대부분의 페이지에는 데이터베이스에 정의되지 않은 단어가 많이 있습니다. 독자는 데이터베이스에서 정의가없는 너무 많은 단어를 클릭하면 결국 좌절하게됩니다. 그것은 이 인 단어를 알리는 것으로 피하기를 원하는 것입니다.

내 생각에 페이지 상단에서 시작하여 데이터베이스에 대해 모든 단어를 테스트하고, 정의 된 경우 단어를 다른 색상으로 hgihlight하고 다음 단어를 테스트해야합니다. . 그것은 저에게 상당히 느린 과정 인 것처럼 들립니다. 더 빠른 방법이 있을지 궁금 해서요?

Answer 1

당신은 이것에 대한 AJAX를 사용한다, 그것은 당신이 jQuery를 사용하여 쉽게 AJAX를 들어 당신이

Lorem ipsum dolor sit amet, <span class="dict">consetetur</span> sadipscing elitr. 

같은 태그에 단어를 감싸는 것을

그래서 아주 간단, 그것은을 위해 가장 많이 사용되는 라이브러리입니다 이, 그것과 같을 것이다 있도록 :

$('span.dict').bind('click', function() { 
    $.ajax("lookup.php", { 
     data: {word: $(this).text()}, // the word 'consetetur' in this example 
     success: function(data) { 
      /* show your popup - data contains here the content of lookup.php 
      you can use something like bootstrap modals or sweetalert for this 

      */ 
     }, 
     error: function(error) { 
      alert('Error:\n' + JSON.stringify(error)); 
      // always handle your ajax errors! 
     } 
    }); 
}); 

그리고 당신의 lookup.php도 매우 간단해야한다 :

<?php 

/* setup the database connection*/ 
$word = $_POST['word']; 
$result = $db->query("SELECT text FROM dict WHERE word = '$word'); 
echo $result; 

기억하십시오. 이것은 예제 코드입니다! 안전하지 않고 테스트되지 않았습니다. 하지만 그것은 당신의 문제를 해결하는 방법을 보여줍니다 :)