javascript，ajax-通过ajax通过API调用更新HTML页面

类似问题

类似于我想要的，但不是我所寻求的特定解决方案

我的问题 我希望用户输入

Genesis

1

，然后单击submit，html将提交请求推送到我的

bible\u api\u pull.js

，它启动一个ajax调用，以异步地用该章节文本更新

index.html

页面

项目的现状 我的html页面：

我在提交时的Ajax调用：

实际网站：

我的最终目标是将这些信息存储到一个数据库中，该数据库基于用户所提取的内容，具有

id

、

bookName

、

chapterNumber

和

chapterText

。然而，我甚至不能让API正确地填充页面

其他资源 我从中获得了主要的API调用代码

编辑：可复制的示例 因此，我有一个包含两个输入的容器，

#bookInput

和

#chapterInput

。在

submit

上，他们成功地被读入下面我的

bible\u api\u pull.js

文件。然而，它并没有普及。我尝试过的事情：

警报在submit函数调用中不起作用

在我的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();
});

书
章
提交

//bible_api_pull.js
$（“#目标”）.submit（函数（事件）{
//下一步…动态接受用户的选择！！！！现在每个输入都有自己的ID！
$（“#加载指示器”）.show（）；
//加载数据
var book=$（“#bookInput”）.val（）；
var chapter=$（“#chapterInput”）.val（）；
//var关键字输入=$（“#搜索输入”）.val（）；
var账簿\章节=账簿+章节；
//传递数据
jQuery.ajax({
网址：'http://getbible.net/json',
数据类型：“jsonp”，
数据：“p=”+book_chapter+”&v=kjv'，
jsonp:'getbible'，
成功：函数（json）{
//设置文本方向
if（json.direction==“RTL”）{
变量方向='rtl'；
}否则{
变量方向='ltr'；
}
/********************************************/
/*返回的诗句的格式*/
/********************************************/
如果（json.type=='verse'）{
var输出=“”；
each（json.book，函数（索引，值）{
输出+=''+值。书籍名+''+值。章节号+'
；
jQuery.each（value.chapter，function）（索引，值）{
输出+=''+值。韵文编号+''；
输出+=value.verse；
输出+='
'；
});
输出+='
'；
});
jQuery（“#经文”）.html（输出）；//我不明白你的问题是什么？
但无论如何，这段代码非常直截了当。

我注释了
if（value.verse.includes（keywordInput））{
，因为
var-keywordInput=$（“#searchInput”）.val（）；
变量在声明过程中被注释，它现在正在工作。
检查响应并让我知道您到底想要什么


$（“#目标”）.submit（函数（事件）{
//下一步…动态接受用户的选择！！！！现在每个输入都有自己的ID！
//$（“#加载指示器”）.show（）；
//加载数据
var book=$（“#bookInput”）.val（）；
var chapter=$（“#chapterInput”）.val（）；
//var关键字输入=$（“#搜索输入”）.val（）；
var账簿\章节=账簿+章节；
//传递数据
jQuery.ajax({
网址：'http://getbible.net/json',
数据类型：“jsonp”，
数据：“p=”+book_chapter+”&v=kjv'，
jsonp:'getbible'，
成功：函数（json）{
//设置文本方向
if（json.direction==“RTL”）{
变量方向='rtl'；
}否则{
变量方向='ltr'；
}
/********************************************/
/*返回的诗句的格式*/
/********************************************/
如果（json.type=='verse'）{
var输出=“”；
each（json.book，函数（索引，值）{
输出+=''+值。书籍名+''+值。章节号+'
；
jQuery.each（value.chapter，function）（索引，值）{
输出+=''+值。韵文编号+''；
输出+=value.verse；
输出+='
'；
});
输出+='
'；
});
jQuery（“#经文”）.html（输出）；//Blake，你能在你的帖子中发布代码的相关部分，而不是外部问题的链接吗？同时，展示你的尝试。StackOverflow的一个功能是搜索功能，它使用户可以在近十年前找到类似的问题和答案。外部链接并不总是具有我们想象的持久力如果他们这样做了，内容会发生变化，并且不会使文章成为可搜索的。寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现这些问题所需的最短代码。没有明确问题说明的问题对其他读者没有用处。请参阅：@vol7ron great point。让我用