서식을 제출 한 후 페이지 새로 고침

Question

양식 제출에 따라지도에 마커를 추가하는 웹 사이트가 있습니다. 양식을 제출 한 후 사용자가 페이지를 새로 고칠 때까지 마커가 표시되지 않습니다. 따라서 제출을 시도 할 때 페이지가 자동으로 새로 고쳐 지도록하려고합니다. 이 같은 많은 질문이 있지만 모두 PHP가 포함되어 있으며 내 코드에 적용하는 방법을 잘 모르겠습니다. 여기에 내가 현재 가지고있는 것입니다 :

(1) 형태의 js 파일을 제출할 때

function mainController($scope, $http) { 
 
    $scope.formData = {}; 
 

 
    $http.get('/api/events') 
 
    .success(function(data) { 
 
     $scope.events = data; 
 
     initMap(data); 
 
     for(i = 0; i < data.length; i++){ 
 
     console.log(data[i].eventLocation); 
 
     } 
 
    }) 
 
    .error(function(data) { 
 
     console.log('Error: ' + data); 
 
    }); 
 

 
    // when submitting the add form, send the text to the node API 
 
    $scope.createEvent = function() { 
 
    $http.post('/api/events', $scope.formData) 
 
     .success(function(data) { 
 
     $scope.formData = {}; // clear the form so our user is ready to enter another 
 
     $scope.events = data; 
 
     console.log(data); 
 
     }) 
 
     .error(function(data) { 
 
     console.log('Error: ' + data); 
 
     }); 
 
    }; 
 

 
    $scope.validateForm = function() { 
 
    if (!$scope.formData.eventName) { 
 
     alert("Please give your event a name!"); 
 
     return false; 
 
    } 
 
    else if (!$scope.formData.eventType) { 
 
     alert("Please choose an event type!"); 
 
     return false; 
 
    } 
 
    else if (!$scope.formData.eventLocation) { 
 
     alert("Please choose a location!"); 
 
     return false; 
 
    } 
 
    else if (!$scope.formData.eventDetails) { 
 
     alert("Please include some details about your event!"); 
 
     return false; 
 
    } 
 
    return true; 
 
    } 
 
}

(2) 내 폼 html 파일

<!-- Event form --> 
 
      <div class="col-lg-6"> 
 
       <!-- Validate form --> 
 
       <form name="myForm" ng-submit="validateForm()"> 
 
       <div class="form-group"> 
 
        <label>Event Name</label> 
 
        <input type="text" name="inputName" class="form-control" ng-model="formData.eventName" placeholder="Event name"> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label>Type</label> 
 
        <select class="form-control" id="inputType" ng-model="formData.eventType"> 
 
        <option>Option 1</option> 
 
        <option>Option 2</option> 
 
        <option>Option 3</option> 
 
        </select> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label>Location</label> 
 
        <select class="form-control" id="inputLocation" ng-model="formData.eventLocation"> 
 
        <option>Location 1</option> 
 
        <option>Location 2</option> 
 
        <option>Location 3</option> 
 
        </select> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label>Event Details</label> 
 
        <textarea class="form-control" name="inputDetails" ng-model="formData.eventDetails" rows="2" placeholder="Add details about your event"></textarea> 
 
       </div> 
 
       <div class="text-center"> 
 
        <button id="add-event"type="submit" class="btn btn-primary" ng-click="createEvent()">Submit</button> 
 
       </div> 
 
       </form>

Answer 1

@MasNotsram의 대답이 정확했습니다. 내 HTML 파일의 컨트롤러에서 라인 창 위치를 추가했는데, 핀을지도에 게시하는 기능을 수행 한 후에 다음 행을 추가했습니다. 왜 일반 양식 제출 대신 Ajax를 사용하는

function mainController($scope, $http) { 
 
    $scope.formData = {}; 
 

 
    $http.get('/api/events') 
 
    .success(function(data) { 
 
     $scope.events = data; 
 
     initMap(data); 
 
     for(i = 0; i < data.length; i++){ 
 
     console.log(data[i].eventLocation); 
 
     //placeMarker(data[i]); 
 
     //test(data); 
 
     } 
 
     //placeMarker(data); 
 
    }) 
 
    .error(function(data) { 
 
     console.log('Error: ' + data); 
 
    }); 
 

 
    // when submitting the add form, send the text to the node API 
 
    $scope.createEvent = function() { 
 
    $http.post('/api/events', $scope.formData) 
 
     .success(function(data) { 
 
     $scope.formData = {}; // clear the form so our user is ready to enter another 
 
     $scope.events = data; 
 
     console.log(data); 
 
     }) 
 
     .error(function(data) { 
 
     console.log('Error: ' + data); 
 

 
     }); 
 
     // SOLUTION LINE 
 
     location.href = "http://__DESIRED_WEB_PAGE_REFRESH__"; 
 
    }; 
 

 
    $scope.validateForm = function() { 
 
    if (!$scope.formData.eventName) { 
 
     alert("Please give your event a name!"); 
 
     return false; 
 
    } 
 
    else if (!$scope.formData.eventType) { 
 
     alert("Please choose an event type!"); 
 
     return false; 
 
    } 
 
    else if (!$scope.formData.eventLocation) { 
 
     alert("Please choose a location!"); 
 
     return false; 
 
    } 
 
    else if (!$scope.formData.eventDetails) { 
 
     alert("Please include some details about your event!"); 
 
     return false; 
 
    } 
 
    return true; 
 
    } 
 
}