提交表单后刷新页面
问题描述：
我有一个网站，根据表单提交将标记添加到地图。提交表单后，直到用户刷新页面才会显示标记。因此，我试图使它在点击提交后自动刷新页面。有很多这样的问题，但都包括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>
答
@MasNotsram的回答是正确的。在我的HTML文件的控制器中，我添加了线条窗口的位置，在处理贴图到地图的函数之后添加了以下行。
location.href = "http://__DESIRED_WEB_PAGE_REFRESH__";这里是控制器结束了一下看起来像：
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;
}
}
你为什么要使用Ajax而不是常规的形式提交？ Ajax的重点在于避免加载新页面。 – Quentin
window.location = window.location.href – MasNotsram
@Quentin你可以给一个关于如何简单地重新加载谷歌地图的建议吗？ – user2990