0
everyone。我有以下代码拦截表单submition并发出Ajax调用：jquery Ajax请求执行多次
$(function() {
$('form').each(function (id, el) {
$(el).submit(function (event) {
event.preventDefault();
var _data = $(this).serialize();
alert(id);
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: _data
})
.done(function (response) {
if (response === '') {
notifySuccess("Já recebemos sua história! Obrigado por compartilhá-la conosco!");
$(el).find('textarea').val(' ');
} else {
notifyAlert(response);
}
})
.fail(function(data) {
notifyAlert(data.responseText);
});
grecaptcha.reset($(this).find('button').attr('id'));
});
});
$('textarea').click(function() {
if($(this).val() === ' ')
$(this).val('');
});
});
代码似乎没问题。但是，当我在浏览器中运行网站并在$.ajax({处放置了一个断点时，它向我显示当我尝试提交表单时它执行了4次。出于调试的原因，我把alert(id)看看它提交的是什么格式。我惊讶的是，警报执行正确的表单ID和一次。换句话说，只有AJAX行被执行4次。它之前的代码没有。值得注意的是回调（.done和.fail）也只执行一次。这里会发生什么？
这里是整个代码：
var onLoadRecaptcha = function() {
\t $('form').each(function (id, el) {
\t \t $(el).ready(function() {
\t \t \t var submit = function() {
\t \t \t \t $(el).submit();
\t \t \t }
\t \t \t var _id = grecaptcha.render(
\t \t \t \t $(el).find('button').get(0),
\t \t \t \t {
\t \t \t \t \t 'sitekey': '6LeDwBoUAAAAANMD7VBNK2F2agKXl6rduUlelf5U',
\t \t \t \t \t 'callback': submit
\t \t \t \t }
\t \t \t);
\t \t \t $(el).find('button').attr('id', _id);
\t \t });
\t });
}
$(function() {
\t $('form').each(function (id, el) {
\t \t $(el).submit(function (event) {
\t \t \t event.preventDefault();
\t \t \t var _data = $(this).serialize();
\t \t \t alert(id);
\t \t \t $.ajax({
\t \t \t \t \t type: 'POST',
\t \t \t \t \t url: $(this).attr('action'),
\t \t \t \t \t data: _data
\t \t \t })
\t \t \t .done(function (response) {
\t \t \t \t if (response === '') {
\t \t \t \t \t notifySuccess("Já recebemos sua história! Obrigado por compartilhá-la conosco!");
\t \t \t \t \t $(el).find('textarea').val(' ');
\t \t \t \t } else {
\t \t \t \t \t notifyAlert(response);
\t \t \t \t }
\t \t \t })
\t \t \t .fail(function(data) {
\t \t \t \t notifyAlert(data.responseText);
\t \t \t });
\t \t \t grecaptcha.reset($(this).find('button').attr('id'));
\t \t });
\t });
\t $('textarea').click(function() {
\t \t if($(this).val() === ' ')
\t \t \t $(this).val('');
\t });
});
var notifyAlert = function (message) {
\t $("#notify-modal").find('.modal-body').removeClass('alert-success');
\t $("#notify-modal").find('.modal-body').addClass('alert-danger');
\t $("#notify-modal").find('.modal-body').text(message);
\t $("#notify-modal").modal('show');
}
var notifySuccess = function (message) {
\t $("#notify-modal").find('.modal-body').removeClass('alert-danger');
\t $("#notify-modal").find('.modal-body').addClass('alert-success');
\t $("#notify-modal").find('.modal-body').text(message);
\t $("#notify-modal").modal('show');
}<!doctype html>
<?php
\t // \t error_reporting(0);
\t require_once('scripts/connect.php');
\t //require_once('scripts/fb.php');
\t $res = mysqli_query($mysqli, "SELECT * FROM `personas`");
?>
<html class="no-js" lang="pt-BR">
\t <head>
\t \t <meta charset="utf-8">
\t \t <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
\t \t <title>Campanha Anti-bullying | UNASP-EC</title>
\t \t <meta name="description" content="Uma campanha anti-bullying bem bacaninha">
\t \t <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
\t \t <link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
\t \t <link href="style.css" rel="stylesheet">
\t \t <!--[if lt IE 9]>
\t \t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
\t \t \t <script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
\t \t <![endif]-->
\t </head>
\t <body>
\t \t <!--[if lt IE 8]>
\t \t \t <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
\t \t <![endif]-->
\t \t <section>
\t \t \t <div class="fill-viewport cover d-flex flex-column justify-content-center align-items-center text-uppercase container" style="background-color: #000; color: #FFF">
\t \t \t \t <img class="img-fluid" src="images/cover_text.png" alt="Bullying, esta brincadeira não tem graça!" />
\t \t \t </div>
\t \t </section>
\t \t <section> <!-- Apresentação -->
\t \t \t <div class="container my-5 text-justify stylize-text">
\t \t \t \t <p>O sol queimava, mas dentro da menina magra e de cabelos crespos existia uma tempestade provinda do Alasca. O céu se estendia num azul pintado de anil, porém, a menina tímida de pequeno porte, o enxergava cinza. Os pássaros cantavam, no entanto, a menina de óculos e pele negra ouvia apenas um tom dissonante. Talvez hoje o som seja algo semelhante ao da trilha de Bernard Herrmann no filme Psicose.</p>
\t \t \t \t <p>— Mãe, me dá R$0,50? — perguntou a pequena de oito anos.</p>
\t \t \t \t <p>— Por que você quer esse dinheiro? — retrucou a mãe desconfiada.</p>
\t \t \t \t <p>— Por nada mãe, eu só quero — respondeu, agora com os olhos lacrimejados.</p>
\t \t \t \t <p>A mãe não tinha ideia do que acontecia e atordoada com os fatos relatados pela filha, se viu sem forças para continuar o caminho tortuoso até a escola.</p>
\t \t \t \t <p>— Mãe ela me bate quando não dou o dinheiro e todos os dias eles me xingam e me deixam sozinha no recreio.</p>
\t \t \t \t <p>O trecho acima poderia ser facilmente confundido com aquelas histórias ficcional, não fosse um fato vivido por 46,6% dos alunos entrevistados pelo Instituto Brasileiro de Geografia e Estatística (IBGE). O último senso confirmou o crescimento significativo desde o último levantamento feito em 2012, onde apontou 35,3% o número de vítimas nas escolas. De acordo com a pesquisa, 7,4% dos entrevistados atribuíram a aparência como principal motivo para as agressões.</p>
\t \t \t \t <p>De acordo com o Código Civil Brasileiro, o <i>bullying</i> é crime e resulta em pena ao agressor, podendo ser advertência ou até mesmo restrição de liberdade. Alessandra Borelli, advogada e coordenadora do <i>Manual de Boas Práticas para Uso Seguro das Redes Sociais</i> da Ordem dos Advogados do Brasil de São Paulo (OAB/SP) e coordenadora do guia <i>Conhecendo para Prevenir bullying< e Cyberbullying</i>, explica as consequências de causar dano moral ou físico ao outro e lembra ser obrigação do agressor, dos pais ou até mesmo da escola reparar a ofensa. “Logo, se um menor for responsável pela prática de <i>bullying</i>, muito embora a legislação privilegie a adoção de medidas voltadas à orientação e resgate da boa disciplina, nada impede que a vítima do <i>bullying</i> promova medidas legais buscando a reparação dos danos suportados”, destaca. Ainda de acordo com Alessandra é responsabilidade de todos, família e escola, prestar ajuda necessária a vítimas de <i>bullying</i>, com o intuito de aliviar as consequências da agressão. “Considerando os aspectos morais que alicerçam as relações entre pais e filhos, alunos, escola e sociedade em geral, todos somos responsáveis e se, ao notarmos sinais de vítimas ou agressores em nossos filhos e alunos, devemos agir tempestivamente. Famílias e escolas precisam caminhar juntas”, pontua.</p>
\t \t \t \t <p>O Centro Universitário Adventista de São Paulo (Unasp), campus Engenheiro Coelho, entende o <i>bullying</i> como um problema real na vida de crianças e jovens e por esse motivo, aderiu à campanha “Essa brincadeira não tem graça”, com o objetivo de conscientizar vítimas e agressores, alunos de escolas e universidades públicas e privadas para a luta contra o <i>bullying</i>.</p>
\t \t \t </div>
\t \t </section>
\t \t <section> <!-- Imprensa -->
\t \t \t <div class="container py-5">
\t \t \t \t <h1>Imprensa</h1>
\t \t \t </div>
\t \t </section>
\t \t <section> <!-- Eu Cuido de Você -->
\t \t \t <div class="container py-5">
\t \t \t \t <h1>Eu Cuido de Você</h1>
\t \t \t \t <p class="text-justify stylize-text">Você acompanhou histórias reais de brincadeiras sem graça, mas isso não precisa continuar. Nós entendemos o momento difícil e delicado que envolve uma agressão, mas você deve saber que não está sozinho. O Unasp preparou uma equipe de psicólogos para te ajudar. Tudo o que você precisa fazer é nos contar sua história. Fique a vontade e desabafe nos comentários abaixo sobre o que você enfrenta em seu dia-a-dia. Fique tranquilo, pois não vamos contar para ninguém. Queremos cuidar de você!</p>
\t \t \t \t <ul class="list-unstyled form-list">
\t \t \t \t \t <?php while ($persona = $res->fetch_array(MYSQLI_ASSOC)) { ?>
\t \t \t \t \t \t <li class="card card-inverse rounded-0 mb-4" style="background-color: #333;">
\t \t \t \t \t \t \t <div class="card-block">
\t \t \t \t \t \t \t \t <form id="story-<?php echo $persona['id']; ?>" action="scripts/story_submit.php" method="post" class="h-100">
\t \t \t \t \t \t \t \t \t <input name="id" type="hidden" value="<?php echo $persona['id']; ?>" />
\t \t \t \t \t \t \t \t \t <div class="d-flex form-body">
\t \t \t \t \t \t \t \t \t \t <div class="d-flex flex-column">
\t \t \t \t \t \t \t \t \t \t \t <img src="./images/personas/<?php echo htmlspecialchars($persona['image']); ?>" alt="" />
\t \t \t \t \t \t \t \t \t \t \t <span class="persona-caption"><?php echo htmlspecialchars($persona['name']); ?></span>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t <div class="d-flex flex-column w-100">
\t \t \t \t \t \t \t \t \t \t \t <textarea name="story" class="form-control" maxlength="500" required></textarea>
\t \t \t \t \t \t \t \t \t \t \t <button class="btn btn-primary g-recaptcha">Enviar</button>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t <div class="recaptcha"></div>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </form>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </li>
\t \t \t \t \t <?php } ?>
\t \t \t \t </ul>
\t \t \t </div>
\t \t </section>
\t \t <!-- Notify Modal -->
\t \t <div class="modal fade" id="notify-modal" tabindex="-1" role="dialog" aria-hidden="true">
\t \t \t <div class="modal-dialog " role="document">
\t \t \t \t <div class="modal-content">
\t \t \t \t \t <div class="modal-body alert mb-0">
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
\t \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
\t \t <script src="script.js"></script>
\t \t <script src="https://www.google.com/recaptcha/api.js?onload=onLoadRecaptcha&render=explicit" async defer></script>
\t </body>
</html>
<?php
\t $res->free();
\t $mysqli->close();
?>
你真的在服务器上看到4个请求？给我看一张Google Chrome的图片 – funcoding
不需要。由于表单数据只提交一次到数据库，我认为在服务器上只有一个请求。 –
将'alert（id）;'更改为'console.log（id）'查看显示ID的次数 – funcoding