如何在json中动态添加数据

时间:2014-11-19 10:13:12

标签: mysql ajax json angularjs angularjs-ng-repeat

我有一个表单,我写数据,我通过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">&nbsp;</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>

1 个答案:

答案 0 :(得分:0)

$scope.input= your input data;

$ http.post(json文件路径,$ scope.input);