Javascript 单击函数赢得'；t更新第页上的信息

我希望我的submit按钮从旁边的输入框中提取值，将“#”更改为“-”，然后将其传递给该用户，这样我就可以分别提取该用户的信息，然后用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>

$（“#usernameBtn”）。单击（函数（）{
var untouchdid=$（“#userid”）.val（）；
var usrID=untouchdid.replace（“#”），“-”；
$.ajax({
url:“https://owapi.net/api/v3/u/“+usrID+”/stats”，
数据类型：“json”，
数据：“，
成功：功能（数据）{
$（'heroStats_elims'）.html（''+data.us.stats.competitive.average_stats.eliminations_avg+''）；
//var avgElims=//data.us.stats.competitive.average\u stats.eliminations\u avg
}
}); });
提交

您需要使用

event.preventDefault（）

如@Andrew所述，以防止提交页面的默认行为

$（“#usernameBtn”）。单击（函数（e）{
e、 预防默认值（）；
var untouchdid=$（“#userid”）.val（）；
var usrID=untouchdid.replace（“#”），“-”；
$.ajax({
url:“https://owapi.net/api/v3/u/“+usrID+”/stats”，
数据类型：“json”，
数据：“，
成功：功能（数据）{
$（'heroStats_elims'）.html（''+data.us.stats.competitive.average_stats.eliminations_avg+''）；
//var avgElims=//data.us.stats.competitive.average\u stats.eliminations\u avg
}
}); 
});

提交
尝试使用
。这将删除提交页面的行为。只是想一想：您不需要使用
event.preventDefault（）
来阻止表单实际提交吗？看起来所有的代码都在执行，但是在click函数运行之后，按钮的默认函数也会运行，在本例中，这意味着提交表单。如果表单没有目标，那么它将显示为正在刷新页面。