1

当我从同一页面上的表单输入中发布数字时，我试图让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>

测试服务器.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);
?>
4

0 回答 0