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标签时，它不起作用：至少它完成了我现在要做的事情：）

在Javascript中提交后显示SPARQL查询

1 个答案: