方法从服务器加载数据并将返回的数据放入 进入所选元素。load()
我对这部分代码有点困惑:
$(".form-message").load("mail.php",...
我在 mail.php 中有 PHP 和 Javascript 代码。两种代码都处理错误。
查看
<p class="form-message"></p>
元素,PHP 代码对该元素有意义,因为它会根据用户的输入更改内容。
但是对于 Javascript 代码,没有任何与
<p class="form-message"></p>
元素相关的内容来操纵它的内容。
所以我想知道,如果我将这样的 PHP 文件加载到
<p>
元素:
$(".form-message").load("mail.php, ...
...它包含与那个无关的 Javascript 代码
<p> element
,那 JS 代码会发生什么?
它会像普通的 Javascript 代码一样执行吗?
index.php
<script>
$ (document) .ready (function() {
$("form") .submit(function(event) {
event.preventDefault();
var name = $("#mail-name").val();
var email = $("#mail-email").val();
var gender = $("#mail-gender").val();
var message = $("#mail-message").val();
var submit = $(“"#mail-submit").val();
$(".form-message").load("mail.php", {
name: name;
email: email,
gender: gender,
message: message,
submit: submit
});
});
});
</script>
</head>
<body>
<form action="mail.php" method="POST")>
<input id="mail-name" type="text" name="name" placeholder="Full name">
<br>
<input id="mail-email" type="text" name="email" placeholder="E-mail">
<br>
<select id="mail-gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<br>
<textarea id="mail-message" name="message" placeholder="Message"></textarea>
<br>
<button id="mail-submit" type="submit" name="submit">Send e-mail</button>
<p class="form-message"></p>
</form>
</body>
mail.php
<?php
if (isset($_POST['submit'])) {
$name = $_POST[ 'name'];
$email= $_POST['email'];
$gender = $_POST[ 'gender'];
$message = $_POST[ 'message'];
$errorEmpty = false;
$errorEmail = false;
if (empty($name) || empty($email) || empty ($message)) {
echo "<span class='form-error'>Fill in all fields!</span>";
$errorEmpty = true;
}
elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "<span class='form-error'>Write a valid e-mail address!</span>";
$errorEmail = true;
}
else {
echo "<span class='form-success'>Fill in all fields!</span>";
}
}
else {
echo "There was an error!";
}
?>
<script>
$("#mail-name, #mail-email, #mail-message, #mail-gender").removeClass("input-error");
var errorEmpty = "<?php echo $errorEmpty; 2>";
var errorEmail = "<?php echo $errorEmail; 2>";
if (errorEmpty == true) {
$("#mail-name, #mail-email, #mail-message").addClass("input-error");
}
if (errorEmail == true) {
$("#mail-email").addClass("input-error");
}
if (errorEmpty == false && errorMail == false) {
$("#mail-name, #mail-email, #mail-message").val("");
}
</script>
我在这个Youtube AJAX 教程上找到了这段代码