Question

我正在尝试使用JQuery和JS来获取html文件名/ URL，并返回该文件中的所有文本（不包括标签）。

我以前从未使用过JQuery，也无法弄清楚为什么我的代码不起作用。

我正在使用HTML表单获取文件名。

提交表单后，它将触发一个JS函数，该函数应从提供的文件名中检索文本，并将其存储为变量。

第一段代码是我的JS文件。第二个是具有表单的HTML页面。第三页是测试页。

var pageWords;

function showWords() {
    var filename = $('#filename');
    $.get(filename, function (data) {
        pageWords = data;
        //alert(pageWords)
    });
}






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Word Count Page</title>
    <script src="JQUERY.js"></script>
    <script src="wordCount.js"></script>
</head>
<body>
<div id="inputContainer">
    <form>
        Enter a file name to be evaluated:
        <input type="text" id="filename">
        <input type="submit" id="submit" onsubmit="showWords()">
    </form>
</div>
<div id="results">

</div>
</body>
</html>






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test file</title>
</head>
<body>
<b>Some text</b>
    Some more
<small>small text</small>
</body>
</html>

Answer 1

您的代码几乎正确，但是您正在将输入元素（而不是输入值）传递给jQuery。
此外，您的<form>将在用户单击“提交”按钮后立即提交，这可能会将用户重定向到另一个页面并丢弃所有表单数据。

以下内容可能会解决这些问题。

var pageWords;

function showWords() {
    // var filename = $('#filename'); // `filename` is an object
    var filename = $('#filename').val(); // `val()` returns the content of the input
    $.get(filename, function (data) {
        pageWords = data;
        //alert(pageWords)
    });
}

// Remember to abort the default submit action
var form = document.querySelector('form')
form.addEventListener('submit', event => event.preventDefault())

将JQuery GET请求的结果存储为javascript变量

1 个答案: