javascript - 获取在 Javascript 中提交后显示的 SPARQL 查询

Question

我试图在用户使用他们输入的值按下提交后显示查询结果，查询旨在获取此 input 并生成特定于输入的结果。查询确实获取了输入，因为我已将查询代码放入警告框中，它会在查询中显示来自用户的 input，当然，在按下提交后会弹出此警告框。我的代码如下:

HTML

   <table id="results">
    </table>
    <form>
        First name:<br>
        <input id="messageInput" type="text" name="firstname"><br>
        <input id="submit99" type="submit" value="Submit">
    </form> 

提交后，查询结果应显示在表格中。因此 table 被插入。

脚本

<script type="text/javascript">
    var table = $("#results");
    table.on("click", "td", myFunction); 
    var url = "http://dbpedia.org/sparql";
        $('#submit99').on('click', function (e) {
            var userInput = $('#messageInput').val();
            var query = [
            "PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>",
            "PREFIX type: <http://dbpedia.org/class/yago/>",
            "PREFIX prop: <http://dbpedia.org/property/>",
            "SELECT ?spouse",
            "WHERE {",
                "?dave dbo:spouse dbr:" + userInput + ".",
                "?dave rdfs:label ?spouse.",
              "}",
            "Limit 1"
            ].join(" ");

            alert("this query: [" + query + "]");
            var queryUrl = url + "?query=" + encodeURIComponent(query) + "&format=json";
            console.log(queryUrl);
            $.ajax({
                dataType: "jsonp",
                url: queryUrl,
                success: function (data) {
                    console.log(data);
                    // get the table element
                    var table = $("#results");

                    // get the sparql variables from the 'head' of the data.
                    var headerVars = data.head.vars;

                    // using the vars, make some table headers and add them to the table;
                    var trHeaders = getTableHeaders(headerVars);
                    table.append(trHeaders);

                    // grab the actual results from the data.
                    var bindings = data.results.bindings;

                    // for each result, make a table row and add it to the table.
                    for (rowIdx in bindings) {
                        table.append(getTableRow(headerVars, bindings[rowIdx]));
                    }
                }
            });

            function getTableRow(headerVars, rowData) {
                var tr = $("<tr></tr>");

                for (var i in headerVars) {
                    tr.append(getTableCell(headerVars[i], rowData));
                }

                return tr;
            }
            function getTableCell(fieldName, rowData) {
                var td = $("<td></td>");
                var fieldData = rowData[fieldName];
                //alert("fieldName = ["+fieldName +"] rowData[fieldName][value] = ["+rowData[fieldName]["value"] + "]");
                td.html(fieldData["value"]);
                return td;
            }
            function getTableHeaders(headerVars) {
                var trHeaders = $("<tr></tr>");
                for (var i in headerVars) {
                    trHeaders.append($("<th>" + headerVars[i] + "</th>"));
                }
                return trHeaders;
            }

        });
    </script>

如您所见，查询结果应在用户按下提交后显示在表格中，这就是为什么我将几乎所有代码都放在 submit99 按钮中的原因。你们应该能够通过将代码复制并粘贴到您自己的 IDE 来运行代码，以获得更熟悉的理解。所以现在的问题是提交后除了显示用户输入的警告框外什么都没有显示。

感谢您的宝贵时间 :)

Answer 1

所以我设法解决了这个问题并得到了结果......我所要做的就是在表格中插入表单元素，如:

<table id="results">

   <First name: 
    <br>
    <input id="messageInput" type="text" name="firstname">
    <br>
    <input id="submit99" type="submit" value="Submit">

</table>

然而这很奇怪，因为当我尝试输入 form 标签时它不起作用:至少它现在做了我想要它做的事情:)