api加载后javascript继续刷新页面

时间:2019-03-11 09:18:55

标签: javascript html ajax api

我正在尝试发送请求并从我自己的同义词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之后(当我单击“生成同义词”按钮时)继续重新加载

1 个答案:

答案 0 :(得分:2)

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