API加载后，JavaScript继续刷新页面

Question

我正在尝试发送请求并从我自己的同义词API中获得答案。API效果很好。JavaScript正在得到答案，但是它一直在刷新页面，最后我的HTML没有输出。这是我的HTML脚本：

<form method="POST">
    <input type="text" class="question" />
    <button class="gen-syn">Generate synonyms</button>
    <input type="submit" value="Save"/>
</form>

这是我的JavaScript：

$(document).on('click','.gen-syn',function(){
 var questionVal = $(".question").val();
 if (questionVal == ''){
    $(".question").focus();
 }
 else {
   $.ajax({
       type :'POST',
       url : "http://192.168.1.9:5000/synonyme_word/"+questionVal,
       success : function(response){
           var divSynonymes = $(document.createElement('div'));
           $(".question").after(divSynonymes);
           for (var a in response){
               $(divSynonymes).append('<h1 class="titre-textareal-question-icona-go " value=>'+a+'</h1>'+
               '<div class="form-group row" >'+
                   '<div class="col-sm-12 listeSyn">'+
                   '</div>'+
               '</div>'
               );
               for (syn in response[a]){
                 var synonyme = response[a][syn]
                 $(".listeSyn").append(
                     '<input type="checkbox" name="checkboxes[249]" id="frm-test-elm-110-100" autocomplete="off" />'+
                     '<div class="btn-group">'+
                         '<label for="frm-test-elm-110-100" class="btn btn-primary">'+
                             '<span class="fa fa-check-square-o fa-lg"></span>'+
                             '<span class="fa fa-square-o fa-lg"></span>'+
                             '<span class="content">'+synonyme+'</span>'+
                         '</label>'+
                     '</div>');
               }
           }
       },
    });
    return False;
 }
});

我没有进行任何重新加载，但是导航器在调用API后继续重新加载（当我单击生成同义词按钮时）

Answer 1

完全摆脱了<form>。它的行为与您的代码混乱。只需使用<div>。

Answer 2

这应该解决您的问题。

<input type="text" class="question" />
<button class="gen-syn">Generate synonyms</button>
<input type="submit" value="Save"/>

您只需要一个按钮即可进行API调用，然后您的JS代码创建动态div和其他元素即可显示同义词。

希望这会有所帮助。