我已经使用AngularJS创建了一个app，在这里您应该有两步保留表单（同一表单中的两步）。我想使用PhpMailer发送表单。
已经设置好所有内容，现在我想发送邮件，但是，当我在表单中填写了所有必需的信息后按了“发送”按钮时，网页将刷新，没有电子邮件被发送出去。
我已将警告消息放入contactController中，以了解该文件是否已完全执行，但没有出现警告。
现在，我似乎无法弄清楚为什么当提交按钮被调用时，我的contactController无法正常运行/被调用的原因。
您可以自己查看page，以确认我刚才说的是正确的。
我也是AngularJS的新手，这是我正在使用该平台构建的第二个应用程序。
HOME / INDEX.HTML
<div class="alert alert-info" role="alert">
You can also call us for any questions, or to make a reservation for your e-scooter <a href="tel:31611152220"> <i class="fas fa-phone"></i>+31611152220</a>
</div>
<div class="container" id="item-1" >
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item" id="cardLinkOne" onclick="activeCardOne(this)">
<a class="nav-link active" id="navLinkOne"><img src="assets/images/scooter-white.png" alt=""><br>Scooter White</a>
</li>
<li class="nav-item" id="cardLinkOne" onclick="activeCardTwo(this)">
<a class="nav-link" id="navLinkTwo"><img src="assets/images/scooter-black.png" alt=""><br>Scooter Black </a>
</li>
</ul>
</div>
<!-- <div class="ng-scope" ng-include="'scooterWhiteMail.html'"></div> -->
<div ng-app="contactApp" >
<div class="card-body cardView" id="cardBodyOne" ng-controller="ContactController" >
<img class="card-img-top" src="https://www.lastprice.co.il/uploadimages/MiScooter.png" alt="Card image cap">
<h5 class="card-title">Scooter White</h5>
<div class="progress">
<div class="progress-bar progress-bar-white" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<form ng-submit="submit(contactform)" name="contactform" method="post" action="" class="form-horizontal" role="form">
<div class="steps stepOneWhite" id="stepOne">
<div class="form-group">
<select ng-model="formData.inputSelector" id="inputSelector" name="inputSelector" type="text" class="form-control" name="scooters">
<option value="halfHour">1 / 2 hour = 20,-</option>
<option value="oneDay">1 day = 30,-</option>
<option value="twoDays">2 days = 55,</option>
<option value="threeDays">3+ dagen = +20</option>
</select>
</div>
<h2>Pick up</h2>
<input ng-model="formData.inputDateOne" id="inputDateOne" name="inputDateOne" class="date" type="date" value="2018-07-15" min="2018-01-01" max="2018-12-31">
<input ng-model="formData.inputTimeOne" id="inputTimeOne" name="inputTimeOne" class="time" type="time" value="09:45:00" required>
<h2>Return</h2>
<input ng-model="formData.inputDateTwo" id="inputDateTwo" name="inputDateTwo" class="date" type="date" value="2018-07-22" min="2018-01-01" max="2018-12-31" required>
<input ng-model="formData.inputTimeTwo" id="inputTimeTwo" name="inputTimeTwo" type="time" class="time" value="23:45:00" required>
</div>
<div class="steps stepTwoWhite" id="stepTwo">
<h2>Your Information</h2>
<div class="form-group col-lg-3 offset-lg-3" ng-class="{ 'has-error': contactform.inputName.$invalid && submitted }">
<div class="col-lg-10">
<input ng-model="formData.inputName" type="text" class="form-control inputForm fa fa-input" id="inputName" name="inputName" placeholder="" required>
</div>
</div>
<div class="form-group col-lg-6" ng-class="{ 'has-error': contactform.inputEmail.$invalid && submitted }">
<div class="col-lg-10">
<input ng-model="formData.inputEmail" type="email" class="form-control inputForm fa fa-input" id="inputEmail" name="inputEmail" placeholder="" required>
</div>
</div>
<div class="form-group col-lg-3 offset-lg-3" ng-class="{ 'has-error': contactform.inputNumber.$invalid && submitted }">
<div class="col-lg-10">
<input ng-model="formData.inputNumber" type="number" class="form-control inputForm fa fa-input" id="inputNumber" name="inputNumber" placeholder="" required>
</div>
</div>
</div>
<button type="submit" id="submitInput" class="btn btn-primary btn-lg btn-block submitInputWhite" ng-disabled="submitButtonDisabled">Rent!</button>
<span id="rentButton" class="btn btn-primary btn-lg btn-block rentButtonWhite" onclick="rentNowWhite()">Rent!</span>
</form>
<!-- <p ng-class="result" style="padding: 15px; margin: 0;">{{ resultMessage }}</p> -->
<ul class="list-group list-group-flush">
<li class="list-group-item"><i class="fas fa-check"></i> Insurance included</li>
<li class="list-group-item"> <i class="fas fa-check"></i> Accept credit card and cash</li>
<li class="list-group-item"> <i class="fas fa-check"></i> Available in Amsterdam</li>
</ul>
</div>
</div>
<div class="card-body" id="cardBodyTwo">
<img class="card-img-top" src="https://images-na.ssl-images-amazon.com/images/I/51Qtg4L%2BJmL._SX425_.jpg" alt="Card image cap">
<h5 class="card-title">Scooter Black</h5>
<div class="progress">
<div class="progress-bar progress-bar-black" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<form >
<div class="steps stepOneBlack" id="stepOne">
<div class="form-group">
<select class="form-control" name="scooters">
<option value="halfHour">1 / 2 hour = 20,-</option>
<option value="oneDay">1 day = 30,-</option>
<option value="twoDays">2 days = 55,</option>
<option value="threeDays">3+ dagen = +20</option>
</select>
</div>
<h2>Pick up</h2>
<input class="date" type="date" value="2018-07-15" min="2018-01-01" max="2018-12-31">
<input class="time" type="time" value="09:45:00">
<h2>Return</h2>
<input class="date" type="date" value="2018-07-22" min="2018-01-01" max="2018-12-31">
<input class="time" type="time" value="23:45:00">
</div>
<div class="steps stepTwoBlack" id="stepTwo">
<h2>Your Information</h2>
<div class="form-group col-lg-3 offset-lg-3" ng-class="{ 'has-error': contactform.inputName.$invalid && submitted }">
<div class="col-lg-10">
<input ng-model="formData.inputName" type="text" class="form-control inputForm fa fa-input" id="inputName" name="inputName" placeholder="" required>
</div>
</div>
<div class="form-group col-lg-6" ng-class="{ 'has-error': contactform.inputEmail.$invalid && submitted }">
<div class="col-lg-10">
<input ng-model="formData.inputEmail" type="email" class="form-control inputForm fa fa-input" id="inputEmail" name="inputEmail" placeholder="" required>
</div>
</div>
<div class="form-group col-lg-3 offset-lg-3" ng-class="{ 'has-error': contactform.inputNumber.$invalid && submitted }">
<div class="col-lg-10">
<input ng-model="formData.inputNumber" type="number" class="form-control inputForm fa fa-input" id="inputNumber" name="inputNumber" placeholder="" required>
</div>
</div>
</div>
<button submitInputBlack" class="btn btn-primary btn-lg btn-block" >Rent!</button>
<span id="rentButton rentButtonBlack" class="btn btn-primary btn-lg btn-block" onclick="rentNowBlack()">Rent!</span>
</form>
<ul class="list-group list-group-flush">
<li class="list-group-item"><i class="fas fa-check"></i> Insurance included</li>
<li class="list-group-item"> <i class="fas fa-check"></i> Accept credit card and cash</li>
<li class="list-group-item"> <i class="fas fa-check"></i> Available in Amsterdam</li>
</ul>
</div>
</div>
</div>
<div class="jumbotron jumbotron-fluid" id="item-2">
<div class="container">
<h1 class="display-4">About Us</h1>
<!-- <p class="lead">You can drive up to 90km with a full battery.</p> -->
</div>
</div>
<div class="container" id="item-2">
<div class="card text-center">
<!-- <div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item" id="cardLinkOne" onclick="activeCardThree(this)">
<a class="nav-link active" id="navLinkThree"><br>E City Wheels</a>
</li>
<li class="nav-item" id="cardLinkOne" onclick="activeCardFour(this)">
<a class="nav-link" id="navLinkFour"><br>Ophaalservice</a>
</li>
</ul>
</div>-->
<div class="card-body cardView" id="cardBodyThree">
<h5 class="card-title">E City Wheels</h5>
<p class="card-text">Staying a day or weekend in Amsterdam? Explore the city in a unique way with an electric three-wheeler from E City Wheels. With our unique electric tricycle we are the only one in Amsterdam that they rent out.<br>
<br>
With a battery duration that can cover a distance of up to 80 km and a maximum speed of 25 km per hour. You can visit all the nice commercials of Amsterdam in no time. Our electric three wheelers are very safe because they stabilize themselves, so you do not need a helmet or driver's license.<br>
<br>
For renting the electric three wheelers you can visit our visit address at hotel Camp Inn Amsterdam.
</p>
</div>
<!-- <div class="card-body" id="cardBodyFour" >
<h5 class="card-title">Ophaalservice</h5>
<p class="card-text">De scooters van E City Wheels staat gepubliceerd en worden aangeboden voor verhuur bij hotel Camp Inn Amsterdam. Het hotel is centraal gelegen aan alle stadsdelen en slechts 4km van het centrum. U kunt een scooter bij het hotel huren of gebruik maken van onze ophaal en bezorg service.<br><br>
Voor de verhuur van een scooter vragen wij een geldige legitimatiebewijs. Ook vragen wij een borg van 150( euro), de borg kan per pin, cash of creditcard worden voldaan. De borg ontvangt u volledig terug wanneer de scooter in dezelfde goede conditie wordt terug gebracht zoals van ons ontvangen.<br><br>
Voor de ophaal/bezorg service leveren wij ook op locatie als u zich in Amsterdam bevindt. U telefonisch een E-scooter bestellen om te huren. Aan deze service zijn extra kosten verbonden, zie tarieven.<br><br>
Bezorg en ophaal kosten E scooter in Amsterdam 25( euro).<br><br>
Wil u alleen gebruik maken van een dienst, ophalen of bezorgen deze kosten bedragen 15 ( euro)<br><br>
Willem de zwijgerlaan 350<br><br>
1055 RD Amsterdam<br><br>
<a href="">+31 6 111 522 20</a><br><br>
info@e-citywheels.com</p>
</div>-->
</div>
</div>
<div class="container" id="contactForm">
<h1>Contact us!</h1>
<p>You can send us an Email to :</p>
<a href="mailto:info@E-CityWheels.com">info@E-CityWheels.com</a>
<!-- <div ng-controller="ContactController" class="panel-body">
<form ng-submit="submit(contactform)" name="contactform" method="post" action="" class="form-horizontal" role="form">
<div class="row">
<div class="form-group col-lg-3 offset-lg-3" ng-class="{ 'has-error': contactform.inputName.$invalid && submitted }">
<div class="col-lg-10">
<input ng-model="formData.inputName" type="text" class="form-control inputForm fa fa-input" id="inputName" name="inputName" placeholder="" required>
</div>
</div>
<div class="form-group col-lg-3" ng-class="{ 'has-error': contactform.inputEmail.$invalid && submitted }">
<div class="col-lg-10">
<input ng-model="formData.inputEmail" type="email" class="form-control inputForm fa fa-input" id="inputEmail" name="inputEmail" placeholder="" required>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-lg-3 offset-lg-3" ng-class="{ 'has-error': contactform.inputNumber.$invalid && submitted }">
<div class="col-lg-10">
<input ng-model="formData.inputNumber" type="number" class="form-control inputForm fa fa-input" id="inputNumber" name="inputNumber" placeholder="" required>
</div>
</div>
<div class="form-group col-lg-3" ng-class="{ 'has-error': contactform.inputGuests.$invalid && submitted }">
<div class="col-lg-10">
<input ng-model="formData.inputGuests" type="number" class="form-control inputForm fa fa-input" id="inputGuests" name="inputGuests" placeholder="" required>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-lg-3 offset-lg-3 form-message" ng-class="{ 'has-error': contactform.inputDate.$invalid && submitted }">
<div class="col-lg-10">
<input ng-model="formData.inputDate" type="datetime-local" class="form-control inputForm fa fa-input" id="inputDate" name="inputDate" placeholder="Your Date" required>
</div>
</div>
<div class="form-group col-lg-9 offset-lg-2 form-message" ng-class="{ 'has-error': contactform.inputMessage.$invalid && submitted }">
<div class="col-lg-10">
<textarea ng-model="formData.inputMessage" class="form-control inputForm fa fa-input" rows="4" id="inputMessage" name="inputMessage" placeholder="" required></textarea>
</div>
</div>
<div class="form-group col-lg-9 offset-lg-3">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" id="submitInput" class="btn btn-primary btn-lg btn-block " ng-disabled="submitButtonDisabled">
Send
</button>
</div>
</div>
</div>
</form>
<p ng-class="result" style="padding: 15px; margin: 0;">{{ resultMessage }}</p>
</div>-->
</div>
controllers.JS
app.controller('ContactController', function ($scope, $http) {
alert("starting Mail controller");
$scope.result = 'hidden'
$scope.resultMessage;
$scope.formData; //formData is an object holding the name, email, subject, and message
$scope.submitButtonDisabled = false;
$scope.submitted = false; //used so that form errors are shown only after the form has been submitted
$scope.submit = function(contactform) {
$scope.submitted = true;
$scope.submitButtonDisabled = true;
alert("Receiving Mail");
if (contactform.$valid) {
$http({
method : 'POST',
url : 'contact-form.php',
data : $.param($scope.formData), //param method from jQuery
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } //set the headers so angular passing info as form data (not request payload)
}).success(function(data){
alert("Send Mail");
console.log(data);
if (data.success) { //success comes from the return json object
$scope.submitButtonDisabled = true;
$scope.resultMessage = data.message;
$scope.result='bg-success';
} else {
$scope.submitButtonDisabled = false;
$scope.resultMessage = data.message;
$scope.result='bg-danger';
}
});
} else {
lert("Failed sending Mail");
$scope.submitButtonDisabled = false;
$scope.resultMessage = 'Failed :( Please fill out all the fields.';
$scope.result='bg-danger';
}
}
});
contact-form.php
<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
require_once 'phpmailer/PHPMailerAutoload.php';
if (isset($_POST['inputName']) && isset($_POST['inputEmail']) && isset($_POST['inputNumber']) && isset($_POST['inputGuests']) && isset($_POST['inputDate']) && isset($_POST['inputMessage'])) {
//check if any of the inputs are empty
if (empty($_POST['inputName']) || empty($_POST['inputEmail']) || empty($_POST['inputNumber']) || empty($_POST['inputGuests']) || empty($_POST['inputDate']) || empty($_POST['inputMessage'])) {
$data = array('success' => false, 'message' => 'Please fill out the form completely.');
echo json_encode($data);
exit;
}
//create an instance of PHPMailer
$mail = new PHPMailer();
$mail->From = $_POST['inputEmail'];
$mail->FromName = $_POST['inputName'];
$mail->AddAddress('salman-1992@hotmail.com'); //recipient
$mail->Subject = "Nieuwe reservering is binnengekomen";
$mail->Body = "Nieuwe reservering:". "\r\n\r\nNaam: " . $_POST['inputName'] . "\r\n\r\nTelefoonnummer: " . $_POST['inputNumber'] ."\r\n\r\nAantal Gasten: " . $_POST['inputGuests'] ."\r\n\r\nDatum: " . $_POST['inputDate'] . "\r\n\r\nBericht: " . stripslashes($_POST['inputMessage']);
if (isset($_POST['ref'])) {
$mail->Body .= "\r\n\r\nRef: " . $_POST['ref'];
}
if(!$mail->send()) {
$data = array('success' => false, 'message' => 'Message could not be sent. Mailer Error: ' . $mail->ErrorInfo);
echo json_encode($data);
exit;
}
$data = array('success' => true, 'message' => 'Thanks! We have received your message.');
echo json_encode($data);
} else {
$data = array('success' => false, 'message' => 'Please fill out the form completely.');
echo json_encode($data);
}
INDEX.HTML
<!doctype html>
<html ng-app="project">
<title>e-citywheels</title>
<meta name="author" content="Salman Mohamed">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="“description">
<meta name="keywords" content="scooters,electronic,electronic scooters,Amsterdam, Rotterdam, Markthal">
<head>
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-resource.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-route.min.js">
</script>
<link rel="stylesheet" href="assets/styles/app.css">
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
<script src="assets/scripts/project.js"></script>
<script src="assets/scripts/project-list.js"></script>
<script src="assets/scripts/routes.js"></script>
<script src="assets/scripts/app.js"></script>
<script src="mail/controllers.js">
</script>
<nav class="navNav" ng-include="'shared/navigation.html'"></nav>
</head>
<body>
<div ng-view ></div>
<footer ng-include="'shared/footer.html'"></footer>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookie-bar/cookiebar-latest.min.js?theme=grey&always=1&showNoConsent=1"></script>
<script src="assets/scripts/scripts.js"></script>
</body>
</html>
[1]: http://lebakitchen.com/test/
答案 0 :(得分：1)
根据您提供的代码，似乎控制器从未初始化过。
您是否告诉angular运行，然后初始化“ app”变量？像
angular.module('contactApp', []).run();
var app = angular.module('contactApp');
app.controller('ContactController', function ($scope...
还包括html标头中的angular，jquery和controllers.JS脚本吗？