0
類似的問題，通過更新API調用的HTML頁面
This post類似於我想要的東西，而不是特定的解決方案，我所求。
我的問題
我希望用戶輸入Genesis1然後單擊提交，和HTML推送請求提交到我bible_api_pull.js它將啓動一個AJAX調用更新與章文異步的index.html頁面。
的現狀項目
我的HTML頁面：here
在我的Ajax調用提交：here
實際網站：here
我的最終目標是存儲此信息到id,bookName,chapterNumber和chapterText基於我們的數據庫呃拉。但是，我似乎甚至無法正確地填充頁面API。
其他資源
我從the api information here得到了主要的API調用的代碼。
編輯：重複的例子
所以我有一個容器保持2個輸入，#bookInput和#chapterInput。在submit他們正在成功讀入我的bible_api_pull.js文件下面。但是，它不是填充。我嘗試過的東西：
- 警報在提交函數調用中不起作用。
- 在我的html中更新一個新的
div，看看那個api調用裏面發生了什麼不工作，但沒有讀取。
我在想，如果這是非常微妙的東西我缺少，或者如果這真的是我的理解javascript/ajax邏輯錯誤。
<!-- index.html -->
<div class="container">
<div class="jumbotron">
<form id="target" class="form-inline" action="" method="">
<label class="sr-only" for="inlineFormInput">Book</label>
<input id="bookInput" name="bookId" type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="Search book ...">
<label class="sr-only" for="inlineFormInput">Chapter</label>
<input id="chapterInput" name="chapterId" type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="Search chapter ...">
<button type="submit" class="btn btn-primary" style="">Submit</button>
<img src="../images/ajax-loader.gif" id="loading-indicator" style="display:none;position:absolute;top:"+$(window).height()/2+"px;left:"+$(window).width()/2+"px;" />
</form>
<hr>
<div id="scripture"> </div>
</div>
</div>
// bible_api_pull.js
$('#target').submit(function(event){
// Next up ... dynamically accept the users choice!!!! Each input has it's own ID now!
$('#loading-indicator').show();
// Load the data
var book = $("#bookInput").val();
var chapter= $("#chapterInput").val();
//var keywordInput = $("#searchInput").val();
var book_chapter = book+chapter;
// Pass the data
jQuery.ajax({
url:'http://getbible.net/json',
dataType: 'jsonp',
data: 'p='+book_chapter+'&v=kjv',
jsonp: 'getbible',
success:function(json){
// set text direction
if (json.direction == 'RTL'){
var direction = 'rtl';
} else {
var direction = 'ltr';
}
/********************************************/
/* Formatting for verses being returned */
/********************************************/
if (json.type == 'verse'){
var output = '';
jQuery.each(json.book, function(index, value) {
output += '<center><b>'+value.book_name+' '+value.chapter_nr+'</b></center><br/><p class="'+direction+'">';
jQuery.each(value.chapter, function(index, value) {
output += ' <small class="ltr">' +value.verse_nr+ '</small> ';
output += value.verse;
output += '<br/>';
});
output += '</p>';
});
jQuery('#scripture').html(output); // <---- this is the div id we update
}
/********************************************/
/* Formatting for chapters being returned */
/********************************************/
else if (json.type == 'chapter'){
var output = '<center><h3><b>'+json.book_name+' '+json.chapter_nr+'</b></h3></center><br/><p class="'+direction+'">';
jQuery.each(json.chapter, function(index, value) {
if(value.verse.includes(keywordInput)){
output += ' <small class="ltr">' +value.verse_nr+ '</small> ';
output += value.verse;
output += '<br/>';
}
});
output += '</p>';
jQuery('#scripture').html(output); // <---- this is the div id we update
}
/********************************************/
/* Formatting for books being returned */
/********************************************/
else if (json.type == 'book'){
var output = '';
jQuery.each(json.book, function(index, value) {
output += '<center><h1><b>'+json.book_name+' '+value.chapter_nr+'</b></h1></center><br/><p class="'+direction+'">';
jQuery.each(value.chapter, function(index, value) {
output += ' <small class="ltr">' +value.verse_nr+ '</small> ';
output += value.verse;
output += '<br/>';
});
output += '</p>';
});
if(addTo){
jQuery('#scripture').html(output); // <---- this is the div id we update
}
}
$('#loading-indicator').hide();
},
error:function(){
jQuery('#scripture').html('<h2>No scripture was returned, please try again!</h2>'); // <---- this is the div id we update
},
});
event.preventDefault();
});
布雷克，你可以發佈您的代碼的相關部分在您的文章，而不是鏈接到外部的問題？另外，顯示你的嘗試。 StackOverflow的功能之一就是它的搜索功能，它使用戶能夠在十年前找到類似的問題和答案。外部鏈接並不總是具有我們希望他們所做的持久力，內容會發生變化，並且不會使帖子成爲可搜索的。 – vol7ron
尋求調試幫助的問題（**「爲什麼這個代碼不工作？」**）必須包含所需的行爲，特定的問題或錯誤以及在問題本身**中重現**所需的最短代碼。沒有明確問題陳述的問題對其他讀者無益。請參閱：[如何創建一個最小，完整和可驗證的示例。]（http://stackoverflow.com/help/mcve） –
@ vol7ron偉大的一點。讓我更新一些我認爲會導致一些問題的具體部分。 – bmc