我有一个表单,我写数据,我通过ajax'post'发送到mysql。在同一页面我有另一个ajax,但它是一个'get',我在那里检索数据,然后把它放在桌子上。 我的问题是:当我提交表单时,我要在表格中添加动态数据,因此我无需重新加载页面。这可能吗?如果有,怎么样? 非常感谢你,这里是我的代码(没有2个php文件 - 短的大声笑 - 但如果你需要我可以发布它)
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>hEY bOss</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<style>
body { padding-top: 70px; }
</style>
</head>
<body>
<!--<h2 align="center">HeyBoss Team<br><small>TABELLA TEMPI</small></h2>-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">HeyBossTeam</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="/index.html">Home<span class="sr-only">(current)</span></a>
</li>
<li><a href="#Tempi">Tempi</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" ng-model="cerca" placeholder="Cerca..">
</div>
<button type="submit" class="btn btn-default">Cerca</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid" ng-controller="hb2Controller">
<br>
<form name="AddTimez" method="POST">
<div class="row text-center" align="center">
<div class="col-xs-12 col-md-2">
<label for="lab1">Gioco</label>
<select id="lab1" class="form-control" name="Gioco" ng-model="newTime.Gioco">
<option value="Assetto Corsa" selected>Assetto Corsa</option>
<option value="rFactor">rFactor</option>
</select>
</div>
<div class="col-xs-12 col-md-3">
<label for="lab2">Pista</label>
<input id="lab2" type="text" class="form-control" ng-model="newTime.Pista" name="Pista" placeholder="Pista">
</div>
<div class="col-xs-12 col-md-3">
<label for="lab3">Auto</label>
<input id="lab3" type="text" class="form-control" ng-model="newTime.Auto" name="Auto" placeholder="Auto">
</div>
<div class="col-xs-12 col-md-2">
<label for="lab4">Nome</label>
<input id="lab4" type="text" class="form-control" ng-model="newTime.Nome" name="Nome" placeholder="Nome Pilota">
</div>
<div class="col-xs-12 col-md-2">
<label for="lab5">Tempo</label>
<input id="lab5" type="text" class="form-control" ng-model="newTime.Tempi" name="Tempi" placeholder="Tempo">
</div>
</div>
<br>
<div class="row">
<div class="col-md-12 col-lg-12" align="center">
<button data-ng-click="addNewTime()" class="btn btn-primary btn-block" name="add">Aggiungi Tempo</button>
</div>
</div>
<br>
<div align="center" class="bg-success" ng-show="subSuccess"><h3 class="text-primary">AGGIUNTO!</h3></div>
</div>
<br>
<a name="Tempi"> </a>
<div ng-controller="hbController">
<table class="table table-bordered table-striped">
<thead>
<tr class="text-primary">
<th>Gioco</th>
<th>Pista</th>
<th>Auto</th>
<th>Nome</th>
<th>Tempi</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in datas | orderBy: 'Gioco' | filter:cerca">
<td>{{x.Gioco}}</td>
<td>{{x.Pista}}</td>
<td>{{x.Auto}}</td>
<td>{{x.Nome}}</td>
<td>{{x.Tempi}}</td>
</tr>
</tbody>
</table>
</div>
<script>
function hbController($scope,$http) {
var site = "http://heyboss.altervista.org";
var page = "/mysqlLulz.php";
$http.get(site + page).success(function(response) {$scope.datas = response;});
}
function hb2Controller($scope,$http) {
$scope.addNewTime = function(add){
$http.post("mysqlLulz2.php",{'Gioco': $scope.newTime.Gioco, 'Pista': $scope.newTime.Pista, 'Auto': $scope.newTime.Auto, 'Nome': $scope.newTime.Nome, 'Tempi': $scope.newTime.Tempi})
.success(function(data, status, headers, config){
$scope.subSuccess = true;
console.log("Fatto :)");
});
};
}
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
答案 0 :(得分:0)
$scope.input= your input data;
$ http.post(json文件路径,$ scope.input);