Я пытаюсь отобразить результат запроса после того, как пользователь нажал submit со значением, которое они ввели, запрос предназначен для захвата этого input
и генерации результата, специфичного для ввода. Запрос выполняет захват ввода, поскольку я поставил код запроса в поле предупреждения, и он отображает input
от пользователя в запросе, это окно оповещения появляется после нажатия submit. Мой код ниже:Получить запрос SPARQL после отправки в Javascript
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
<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, чтобы получить более знакомое понимание. Итак, вопрос прямо сейчас после подачи ничего не отображается, кроме предупреждения, отображающего ввод пользователя.
Спасибо за ваше время :)
Вы проверили консоль, что получаете данные? и почему вы используете jsonp? из-за CORS? Я думаю, что json должен работать здесь. Я использую json для получения информации из Wikidata. – Alexan
Да, он говорит только недостижимый код в console.log и любые полезные ссылки для json? Я использую DBPedia для извлечения информации. –
просто измените jsonp на json и запустите консоль – Alexan