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