Question

我正在使用PHP 5.6.30版本..当我尝试执行以下代码时，数据被插入两次。我使用register.php作为视图，使用app.js进行http post服务。

insert.php（数据库连接）

enter code here
 <html>
 <head><title>Nav</title>
 <script 
 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
 </script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-
 route.js"></script>
 <link rel="stylesheet" type="text/css" href="css/header.css"/> 
  <script src="app.js"></script>
  </head>
  <body ng-app="myApp">
  <div ng-controller="RegisterController">

  <form ng-submit="rsubmit()" class="rform">REGISTER 
  <input type="text" class="form-control" name="firstname" ng-
    model="firstname" placeholder="firstnamesss" ><br>
  <input type="text" class="form-control" name="lastname" ng-
  model="lastname" placeholder="lastname" ><br>
  <input type="text" class="form-control" name="username" ng-model="username" placeholder="username"><br>
  <input type="text" class="form-control"  name="emailid" ng-model="emailid" placeholder="emailid" ><br>
  <input type="text" class="form-control" name="password" ng-model="password" placeholder="password" required=""/><br>
  <input type="text" class="form-control" name="mobile" ng-model="mobile" placeholder="mobileno" ><br>
  <button ng-click="rsubmit()"  >Register</button>
   <a href="#/home">Cancel</a>         
  <br></h2>
  </form>
  </div>
  </body>
  </html>

＆GT;

register.php：

var app = angular.module('myApp', ['ngRoute']);
app.controller('RegisterController',function($scope,$http){  
$scope.rsubmit=function(){  

$http.post("insert.php" ,{
'firstname':$scope.firstname,
'lastname':$scope.lastname,
'username':$scope.username,
'emailid':$scope.emailid,
'password':$scope.password,
'mobile':$scope.mobile,

    } )
.success(function(data){  
            alert(data);  
            $scope.firstname = null;  
           // $scope.lastname = null; 

             });
    }
     });

app.js：

import {
  Component, ComponentFactoryResolver, HostListener, ComponentFactory, ComponentRef,ViewContainerRef,ReflectiveInjector,
  ElementRef, ViewChild
} from '@angular/core';
import {AppComponent} from './app.component';
import {App2Component} from './app2.component';
declare let GoldenLayout: any;

@Component({
  selector: 'golden-layout',
  template: `<div style="width:100%;height:500px;" id="layout" #layout>My First Angular 2 App</div>
  <br/><button (click)="sendEvent()">Send event through hub</button>`,
  entryComponents: [AppComponent, App2Component]
})
export class GLComponent {
  @ViewChild('layout') private layout: ElementRef;
  private config: any;
  private layout: ElementRef;

  constructor(private el: ElementRef, private viewContainer: ViewContainerRef,
        private componentFactoryResolver: ComponentFactoryResolver){
    this.config = {
            content: [{
                type: 'row',
                content: [{
                    type: 'component',
                    componentName: 'test1',
                    componentState: {
                      message:"Top Left"
                    }
                }, { 
                        type: 'column',
                        content: [{
                            type: 'component',
                            componentName: 'test2',
                            componentState: {
                              message:"Top Right"
                            }
                        }, {
                                type: 'component',
                                componentName: 'test1',
                                componentState: {
                                  message:"Bottom Right"
                                }
                            }]
                    }]
            }]
        };
  }

  ngAfterViewInit(){
    this.layout = new GoldenLayout(this.config, this.layout.nativeElement);

    this.layout.registerComponent('test1', (container, componentState) => {
          let factory = this.componentFactoryResolver.resolveComponentFactory(AppComponent);

          let compRef = this.viewContainer.createComponent(factory);
          compRef.instance.setEventHub(this.layout.eventHub);
          compRef.instance.message = componentState.message;
          container.getElement().append(compRef.location.nativeElement); 

          container["compRef"] = compRef;

          compRef.changeDetectorRef.detectChanges();
    }); 

    this.layout.registerComponent('test2', (container, componentState) => {
          let factory = this.componentFactoryResolver.resolveComponentFactory(App2Component);

          let compRef = this.viewContainer.createComponent(factory);
          compRef.instance.setEventHub(this.layout.eventHub);
          compRef.instance.message = componentState.message;
          container.getElement().append(compRef.location.nativeElement); 

          container["compRef"] = compRef;

          compRef.changeDetectorRef.detectChanges();
    }); 

    this.layout.init();

        this.layout.on("itemDestroyed", item => {
            if (item.container != null) {
                let compRef = item.container["compRef"];
                if (compRef != null) {
                    compRef.destroy();
                }
            }
        });
  }

  @HostListener('window:resize', ['$event'])
  onResize(event) {
      if (this.layout)
        this.layout.updateSize();
  }

  sendEvent(){
    if (this.layout)
      this.layout.eventHub.emit("someEvent");
  }
}

Answer 1

来自documentation：

警告：小心不要同时使用ngClick和ngSubmit处理程序导致“双重提交”。有关何时可以触发ngSubmit的详细讨论，请参阅表单指令文档。

在您的代码中，您同时使用ng-submit 和 ng-click，因此您会触发控制器（请求）两次。只需删除按钮/输入字段上的ngClick属性即可。

Answer 2

只需从按钮中删除ng-click。在表单中使用的按钮始终提交表单。当您单击按钮时，同时单击按钮时调用rsubmit函数表单即将提交。表单提交再次调用rsubmit函数..

两种方式 1。<button type="button" ng-click="rsubmit()" >Register</button> - 当您使用type="button"时，它会禁用按钮的表单提交功能（要么） 2.从表单中删除action属性。

相同的数据在xampp mysql中插入两次

2 个答案: