Click機能がページの情報を更新しない

Question

送信ボタンの隣の入力ボックスから値を引き出し、 '＃'を ' - 'に変更して情報を引き出すことができるようにするそのユーザーにそれぞれ対応し、そのフィールドをHTMLで入力します。しかし、ページはちょうどリフレッシュされ、 '？' URLに追加されます。

$("#usernameBtn").click(function() { 
    var unTouchedID = $("#userid").val(); 
    var usrID = unTouchedID.replace("#", "-"); 

    $.ajax({ 
     url: "https://owapi.net/api/v3/u/" + usrID + "/stats", 
     dataType: 'json', 
     data: "", 
     success: function (data) { 
     $('#heroStats_elims').html('<h2>'+ data.us.stats.competitive.average_stats.eliminations_avg + '</h2>'); 
    //var avgElims = //data.us.stats.competitive.average_stats.eliminations_avg 
     } 
    }); }); 


<div class="form-group"> 
    <input type="text" class="form-control" placeholder="Enter Battle.net Tag" id="userid"> 
</div> 
<button type="submit" class="btn btn-default" id="usernameBtn">Submit</button> 

Answer 1

あなたは@Andrewがページを送信するデフォルトの動作を防ぐために述べたようにevent.preventDefault();使用する必要があります。

$("#usernameBtn").click(function(e) { 
 
    e.preventDefault(); 
 

 
    var unTouchedID = $("#userid").val(); 
 
    var usrID = unTouchedID.replace("#", "-"); 
 

 
    $.ajax({ 
 
     url: "https://owapi.net/api/v3/u/" + usrID + "/stats", 
 
     dataType: 'json', 
 
     data: "", 
 
     success: function (data) { 
 
     $('#heroStats_elims').html('<h2>'+ data.us.stats.competitive.average_stats.eliminations_avg + '</h2>'); 
 
     //var avgElims = //data.us.stats.competitive.average_stats.eliminations_avg 
 
     } 
 
    }); 
 
});

<div class="form-group"> 
 
    <input type="text" class="form-control" placeholder="Enter Battle.net Tag" id="userid"> 
 
</div> 
 
<button type="submit" class="btn btn-default" id="usernameBtn">Submit</button>