Javascript 刷新JustGage而不重新加载页面

当我在同一页面上发布表单输入的数字时，我试图在不重新加载整个页面的情况下进行刷新

<div id="gauge" class="400x260px"></div>

<!---The Form--->

<form class="form-inline" action="" id="myform" form="" method="post">
<!-- Text input-->
<div class="form-group">
    <label class="col-md-4 control-label" for="total"></label>
    <div class="col-md-8">
        <input id="total" name="total" type="text" placeholder="total" class="form-control input-lg" required>
    </div>
</div>
<!-- Button -->
<div class="form-group">
    <label class="col-md-4 control-label" for="submit1"></label>
    <div class="col-md-4">
        <button id="submitButtonId" name="submit1" class="btn btn-primary btn-xl">Submit</button>
    </div>
</div>
</form>

提交

jQuery：

$(document).ready(function(){
    //JSON REQUEST
    $.getJSON("test_server.php",function(result){
        var g = new JustGage({
            id: "gauge",
            value: result.total,
            min: 0,
            max: 100,
            title: "Data from Form"
        });
    });
    //Post Form
    $("#submitButtonId").on("click",function(e){
        e.preventDefault();
        var formdata = $(this.form).serialize();
        $.post('test_server.php', formdata, function(data){
            //Reset Form
            $('#myform')[0].reset(); 
        });
        return false;
    });
});
</script>

$（文档）.ready（函数（）{
//JSON请求
$.getJSON（“test_server.php”，函数（结果）{
var g=新的JustGage({
id:“仪表”，
值：result.total，
分:0,，
最高：100，
标题：“表格中的数据”
});
});
//邮政表格
$（“#提交按钮ID”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
var formdata=$（this.form）.serialize（）；
$.post（'test_server.php'，formdata，function（data）{
//重置表单
$（'#myform'）[0].reset（）；
});
返回false；
});
});

test_server.php：

<?php
$total= mysqli_real_escape_string($db_conx,$_POST['total']);
$my_data=array(total=>"$total");

// sending output
header('Content-Type: text/json');
echo json_encode($my_data,true);
?>