Question

在我的网页上，当用户单击一个单词时，它应该显示该单词的定义。当用户单击单词时，它将单词变量发送到连接到牛津词典api的php文件，并查询单词的定义，然后将该定义返回到网页。问题是，当我尝试通过ajax将word变量传递给php文件时，它似乎无法正常工作。我使用的是php包装器来使用api，并且当我手动设置单词查询时没有问题。我能够连接到api并检索定义和所有内容，所以我认为问题出在ajax部分。在分配之前，我从未使用过jquery，ajax或php。我不确定自己做错了什么。请帮忙！

我的JS文件

function getSelectedText(){
    var selectedText = '';
        if (window.getSelection)
               selectedText = window.getSelection();
return selectedText;
}

// Retrieve definition 
$(document).ready(function()
{
var selected_text = getSelectedText();
$('#selectable').on("dblclick", function () {
$('.selection').text(selected_text);
$('.is-selected').text(getSelectedText() !== '');
    });

$.ajax({
    url: "dictionary.php", // php file path
    method: "POST", // send data method
    data: {"selected_text": selected_text}, // data to send {name: value}
    success: function(data){
        alert(data);
    } // response of ajax
  });

});

我的PHP文件

$selected_text = $_POST['selected_text'];
echo $selected_text;

$dictionary->queryWord($selected_text);

$dictionary->setResult(0);

/* Get results from dictionary class */
echo "<h1>Dictionary Class Results - ".$dictionary->getWord()."</h1>";
echo "<b>Word:</b> ".$dictionary->getWord();
echo "<br><b>Definition:</b> ".$dictionary->getDefinition();
echo "<br><b>Short Definition:</b> ".$dictionary->getShortDefinition();
echo "<br><b>Example:</b> ".$dictionary->getExample();

/* Displays the current result set */
echo "<br></br>Using result set: <b>".$dictionary->selected_result."</b>";

?>

Answer 1

首先，getSelectedText函数应实际上返回所选文本

function getSelectedText(){
    var selectedText = '';
    if (window.getSelection) selectedText = window.getSelection().toString();
    return selectedText;
    // Or even better using ternary operator: return window.getSelection ? window.getSelection().toString() : '';
}

然后，正如IncredibleHat所说，您应该纠正事件的处理方式可能如下，原因是我通常出于这种目的使用Fetch API：-

// Only fire the ajax when user double click any text/selectables
$('#selectable').on("dblclick", function () {
    // Marked contants since it won't change
    const selected_text = getSelectedText();
    // Make sure you check if the string is not empty before you do the request too
    if(selected_text.trim().length > 0)
    // Then do the request and process the output
    $.ajax({
        url: "dictionary.php", // php file path
        method: "POST", // send data method
        data: {"selected_text": selected_text}, // data to send {name: value}
        success: function(data){
            alert(data);
        }
    });
});

使用AJAX将数据从jquery发送到php文件并返回

1 个答案: