Question

我们正在开发一个多媒体字典系统。这个想法是，如果你在一个网页上，并且有一个你不知道的单词，你双击一个单词并弹出一个字典。

字典与google's dictionary for chrome不同，因为它包含多媒体，是多语言的，它包含超出单词含义的补充信息。

我们的问题是：我们无法在数据库中定义Web中每个页面上的所有单词。这意味着可能无法定义页面上的许多单词。不是让用户双击一个单词来查看是否有定义，我们要检查我们的数据库，页面上的哪些单词被定义为页面正在加载。然后，我们想要突出显示网页上定义的单词，以便读者可以看到定义了哪些单词。

我们的弹出窗口大多以我们想要的方式工作。挑战在于它必须处理我们不是页面所有者的网页（例如当我们将系统开发为浏览器扩展时），这意味着我们无法做到

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

以上是我们迄今为止所做的工作 - 仅适用于Chrome：gwizz demo page。点击安全性，服务器还不安全。

在我们的页面上，大多数单词都已定义，因此您可以双击任何单词，它将显示弹出窗口。但是，在大多数页面上，数据库中都会定义许多单词。如果他们点击太多没有数据库定义的单词，读者最终会感到沮丧。这就是我们想通过发信号通知定义的词来避免的。

在我看来，这需要从页面顶部开始，并针对数据库测试每个单词，如果已定义，则以另一种颜色hgihlight，例如，然后测试下一个单词。这对我来说听起来好像是一个相当缓慢的过程。我想知道是否会有更快的方式？

Answer 1

你应该使用AJAX，这很简单

这样你就可以在任何标签中包装任何单词

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

为了更简单的AJAX你可以使用jQuery，它是最常用的库，所以它看起来像：

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

请记住，这是示例代码！不安全，没有经过测试。但它显示了如何解决您的问题：）

如果在数据库中定义了word，则在html页面上突出显示单词

1 个答案: