jQuery Ajax請求執行多次
[英]Jquery Ajax request executing multiple times
問題描述
大家。 我有以下代碼可以攔截表單提交並進行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 () { $('form').each(function (id, el) { $(el).ready(function () { var submit = function () { $(el).submit(); } var _id = grecaptcha.render( $(el).find('button').get(0), { 'sitekey': '6LeDwBoUAAAAANMD7VBNK2F2agKXl6rduUlelf5U', 'callback': submit } ); $(el).find('button').attr('id', _id); }); }); } $(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(''); }); }); var notifyAlert = function (message) { $("#notify-modal").find('.modal-body').removeClass('alert-success'); $("#notify-modal").find('.modal-body').addClass('alert-danger'); $("#notify-modal").find('.modal-body').text(message); $("#notify-modal").modal('show'); } var notifySuccess = function (message) { $("#notify-modal").find('.modal-body').removeClass('alert-danger'); $("#notify-modal").find('.modal-body').addClass('alert-success'); $("#notify-modal").find('.modal-body').text(message); $("#notify-modal").modal('show'); }
<!doctype html> <?php // error_reporting(0); require_once('scripts/connect.php'); //require_once('scripts/fb.php'); $res = mysqli_query($mysqli, "SELECT * FROM `personas`"); ?> <html class="no-js" lang="pt-BR"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Campanha Anti-bullying | UNASP-EC</title> <meta name="description" content="Uma campanha anti-bullying bem bacaninha"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <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"> <link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet"> <link href="style.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> <script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\\/script>')</script> <![endif]--> </head> <body> <!--[if lt IE 8]> <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> <![endif]--> <section> <div class="fill-viewport cover d-flex flex-column justify-content-center align-items-center text-uppercase container" style="background-color: #000; color: #FFF"> <img class="img-fluid" src="images/cover_text.png" alt="Bullying, esta brincadeira não tem graça!" /> </div> </section> <section> <!-- Apresentação --> <div class="container my-5 text-justify stylize-text"> <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> <p>— Mãe, me dá R$0,50? — perguntou a pequena de oito anos.</p> <p>— Por que você quer esse dinheiro? — retrucou a mãe desconfiada.</p> <p>— Por nada mãe, eu só quero — respondeu, agora com os olhos lacrimejados.</p> <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> <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> <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> <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> <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> </div> </section> <section> <!-- Imprensa --> <div class="container py-5"> <h1>Imprensa</h1> </div> </section> <section> <!-- Eu Cuido de Você --> <div class="container py-5"> <h1>Eu Cuido de Você</h1> <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> <ul class="list-unstyled form-list"> <?php while ($persona = $res->fetch_array(MYSQLI_ASSOC)) { ?> <li class="card card-inverse rounded-0 mb-4" style="background-color: #333;"> <div class="card-block"> <form id="story-<?php echo $persona['id']; ?>" action="scripts/story_submit.php" method="post" class="h-100"> <input name="id" type="hidden" value="<?php echo $persona['id']; ?>" /> <div class="d-flex form-body"> <div class="d-flex flex-column"> <img src="./images/personas/<?php echo htmlspecialchars($persona['image']); ?>" alt="" /> <span class="persona-caption"><?php echo htmlspecialchars($persona['name']); ?></span> </div> <div class="d-flex flex-column w-100"> <textarea name="story" class="form-control" maxlength="500" required></textarea> <button class="btn btn-primary g-recaptcha">Enviar</button> </div> <div class="recaptcha"></div> </div> </form> </div> </li> <?php } ?> </ul> </div> </section> <!-- Notify Modal --> <div class="modal fade" id="notify-modal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog " role="document"> <div class="modal-content"> <div class="modal-body alert mb-0"> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <script src="script.js"></script> <script src="https://www.google.com/recaptcha/api.js?onload=onLoadRecaptcha&render=explicit" async defer></script> </body> </html> <?php $res->free(); $mysqli->close(); ?>
1 個解決方案
解決方案1
0 2017-04-03 19:03:32
你的問題是
$('form').each(function (id, el) {
$(el).submit(function (event) {
id是索引，而el是元素（窗體）。 看到這里： https ： //api.jquery.com/each/
只需添加事件處理程序
$('form').submit(function (event) {
那就是“找到所有存在的表單元素，添加一個事件處理程序以進行提交。”
現在在該alert(id); 更改為alert($(this).index());
因此，索引（如圖所示）就是元素的“ id”。 從jQuery事件處理程序中返回false實際上與在傳遞的jQuery.Event對象上調用e.preventDefault和e.stopPropagation相同。
這應該解決。
$(function() {
$('form').on('submit', function(event) {
event.preventDefault();
event.stopPropagation();// could have "return false;" at the end
var me = $(this);
var myid = $(this).index();
alert(myid); // not that this IS needed...
var _data = me.serialize();
$.ajax({
type: 'POST',
url: me.attr('action'),
data: _data
})
.done(function(response) {
if (response === '') {
notifySuccess("Já recebemos sua história! Obrigado por compartilhá-la conosco!");
me.find('textarea').val(' ');
} else {
notifyAlert(response);
}
})
.fail(function(data) {
notifyAlert(data.responseText);
});
// just to be clear, this happens NOW, before the ajax completes
// is that what is desired?
grecaptcha.reset(me.find('button').attr('id'));
// return false; // instead of event.xx above
});
$('textarea').click(function() {
if ($(this).val() === ' ')
$(this).val('');
});
});
邊注
$("#notify-modal").find('.modal-body').removeClass('alert-success');
$("#notify-modal").find('.modal-body').addClass('alert-danger');
$("#notify-modal").find('.modal-body').text(message);
可能是（避免多次DOM遍歷）
$("#notify-modal").find('.modal-body')
.removeClass('alert-success')
.addClass('alert-danger')
.text(message);
jQuery AJAX內容執行多次
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.