0
我有一个通过AJAX发送的窗体，但AJAX只在第一次刷新后才起作用（F5）。Ajax窗体只在第一次刷新后工作
第一次打开html我发送表单，我必须做一个页面刷新，否则数据它不submited。在第一次刷新之后，AJAX完美运行并始终反映成功的新数据。 （$（“＃fldIdLetraN”））和$（“＃fldLetraN”）），我必须通过$ _REQUEST在php文件中调用它，我认为这可以做到由于数据并未真正插入到JSON文件中导致$ _REQUEST设置不正确，有些干扰第一次发送形式发送。
$("body").on("submit", "#frmPersonas", function(e) {
$("#fldIdLetraN").val(jQuery.inArray(RemoveAccents($("#fldNombre").val().substr(0, 1)), $aLetras));
$("#fldLetraN").val(RemoveAccents($("#fldNombre").val().substr(0, 1)));
var fd = new FormData($("#frmPersonas")[0]);
$.ajax({type: 'POST',
url: "procjson.php",
data: fd,
processData: false,
contentType: false,
success: function() {
CargarPagina($LetraAct, $IdLetraAct, $PagActual);
$("#form").css("display", "none");
$("#formbg").css("display", "none");
}
});
e.preventDefault();
});
整个代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Agenda</title>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="formbg">
<div id="form"></div>
</div>
<div id="divAgenda">
<div id="divLetras"></div>
<div id="divEditar">
<a href="#add" id="add"><div><img src="img/ops/add.png" alt="" /></div></a>
<a href="#update" id="update"><div><img src="img/ops/update.png" alt="" /></div></a>
<a href="#delete" id="delete"><div><img src="img/ops/delete.png" alt="" /></div></a>
</div>
<div id="divBusqueda">
<a href="#hojear" id="hojear"><div><img src="img/ops/hojear.png" alt="" /></div></a>
<a href="#search" id="search"><div><img src="img/ops/search.png" alt="" /></div></a>
</div>
<div id="divPersonas"></div>
<div id="divPaginas"></div>
<div id="divDesplazar">
<a href="#first" id="first"><div><img src="img/move/first.png" alt="" /></div></a>
<a href="#previous" id="prev"><div><img src="img/move/previous.png" alt="" /></div></a>
<a href="#next" id="next"><div><img src="img/move/next.png" alt="" /></div></a>
<a href="#last" id="last"><div><img src="img/move/last.png" alt="" /></div></a>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function() {
$aLetras = new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j",
"k", "l", "m", "n", "ñ", "o", "p", "q", "r", "s", "t", "u", "v",
"w", "x", "y", "z");
for (var i = 0; i < $aLetras.length; i++) {
$("#divLetras").append("<a href='#" + $aLetras[i] + "' id='" + $aLetras[i] + "-" + i + "'\n\
class='tab-letra'>" + $aLetras[i].toUpperCase() + "</a>");
}
$PagActual = 0;
CargarPagina("a", 0, 0);
});
function CargarPagina(letra, id_letra, pag_actual, hojear) {
$.getJSON("datos.json", function(datos) {
$("#divPersonas").empty();
$("#divPersonas").append("<ul id='col1'></ul><ul id='col2'></ul>");
var res_pagina = 6;
for (var i = pag_actual * res_pagina; i < pag_actual * res_pagina + res_pagina; i++) {
if (datos.personas[id_letra][letra][i] === undefined) {
break;
}
var html = "<div id='per" + datos.personas[id_letra][letra][i].id + "'>";
html += "<div><img src='img/photo/" + datos.personas[id_letra][letra][i].foto + "' /></div>";
html += "<div><span>Nombre: </span><span id='nom" + datos.personas[id_letra][letra][i].id + "'>";
html += datos.personas[id_letra][letra][i].nombre + "</span><br />";
html += "<span>Apellidos: </span><span id='ape" + datos.personas[id_letra][letra][i].id + "'>";
html += datos.personas[id_letra][letra][i].apellidos + "</span><br />";
html += "<span>Edad: </span><span id='eda" + datos.personas[id_letra][letra][i].id + "'>";
html += datos.personas[id_letra][letra][i].edad + "</span><br />";
html += "<span>Teléfono: </span><span id='tel" + datos.personas[id_letra][letra][i].id + "'>";
html += datos.personas[id_letra][letra][i].telefono + "</span><br /></div></div>";
if (i >= pag_actual * res_pagina && i < pag_actual * res_pagina + res_pagina - 3) {
$("#col1").append(html);
} else {
$("#col2").append(html);
}
}
$LetraAct = letra;
$IdLetraAct = id_letra;
if (datos.personas[id_letra][letra].length % res_pagina === 0) {
$TotalPag = datos.personas[id_letra][letra].length/res_pagina - 1;
} else {
$TotalPag = Math.floor(datos.personas[id_letra][letra].length/res_pagina);
}
$("#divPaginas").empty();
for (var i = 0; i <= $TotalPag; i++) {
$("#divPaginas").append("<a href='#" + $LetraAct + ",p" + (i + 1) + "' id='pag" + i + "'>" + (i + 1) + "</a>");
}
if($TotalPag === -1) {
$("#divPersonas").html("<div id='noRes'>No se ha encontrado ningún resultado.</div>");
}
if (hojear) {
Hojear(true);
}
});
}
function GreyBox() {
$("#form").fadeIn("fast", function() {
$("#form").css("display", "block");
});
$("#formbg").fadeIn("fast", function() {
$("#form").css("display", "block");
});
}
function AbrirFormulario(crud, id_persona) {
$("#form").html("<div id='frmOp'></div>\n\
<form id='frmPersonas' name='frmPersonas'>\n\
<label for='fldNombre'>Nombre:</label>\n\
<input type='text' id='fldNombre' name='fldNombre' autocomplete='off' />\n\
<label for='fldApellidos'>Apellidos:</label>\n\
<input type='text' id='fldApellidos' name='fldApellidos' autocomplete='off' />\n\
<label for='fldEdad'>Edad:</label>\n\
<input type='text' id='fldEdad' name='fldEdad' autocomplete='off' />\n\
<label for='fldTlf'>Teléfono:</label>\n\
<input type='text' id='fldTlf' name='fldTlf' autocomplete='off' />\n\
<input type='hidden' id='fldIdLetraN' name='fldIdLetraN' />\n\
<input type='hidden' id='fldLetraN' name='fldLetraN' />\n\
<input type='hidden' id='crud' name='crud' value='" + crud + "' />\n\
<input type='submit' id='btnEnviar' value='Enviar' /></form>\n\
<div id='frmAlert'></div>");
if (crud === "C") {
$("#frmOp").html("Agregar contacto");
}
if (crud === "U") {
$("#frmOp").html("Modificar contacto");
$("#fldNombre").val($("#nom" + id_persona).html());
$("#frmPersonas").append("<input type='hidden' id='fldLetraAct' name='fldLetraAct' \n\
value='" + RemoveAccents($("#fldNombre").val().substr(0, 1)) + "' />");
$("#frmPersonas").append("<input type='hidden' id='fldIdLetraAct' name='fldIdLetraAct' \n\
value='" + jQuery.inArray(RemoveAccents($("#fldNombre").val().substr(0, 1)), $aLetras) + "' />");
$("#fldApellidos").val($("#ape" + id_persona).html());
$("#fldEdad").val($("#eda" + id_persona).html());
$("#fldTlf").val($("#tel" + id_persona).html());
$("#frmPersonas").append("<input type='hidden' id='fldIdPersona' name='fldIdPersona' value='" + id_persona + "' />");
}
}
function RemoveAccents(strAccents) {
var strAccents = strAccents.split('');
var strAccentsOut = new Array();
var strAccentsLen = strAccents.length;
var accents = 'ÁABCDÉEFGHÍIJKLMNÑÓOPQRSTÚUVWXYZ';
var accentsOut = "aabcdeefghiijklmnñoopqrstuuvwxyz";
for (var y = 0; y < strAccentsLen; y++) {
if (accents.indexOf(strAccents[y]) !== -1) {
strAccentsOut[y] = accentsOut.substr(accents.indexOf(strAccents[y]), 1);
} else
strAccentsOut[y] = strAccents[y];
}
strAccentsOut = strAccentsOut.join('');
return strAccentsOut;
}
function Hojear(active) {
if (active) {
if ($TotalPag === -1) {
$TotalPag = 0;
}
if ($PagActual === $TotalPag) {
if ($IdLetraAct + 1 === $aLetras.length) {
$IdLetraAct = 0;
$LetraAct = $aLetras[$IdLetraAct];
$PagActual = 0;
} else {
$IdLetraAct++;
$LetraAct = $aLetras[$IdLetraAct];
$PagActual = 0;
}
} else {
$PagActual++;
}
$DelayHojear = setTimeout(function() {
CargarPagina($LetraAct, $IdLetraAct, $PagActual, true);
}, 1000);
} else {
clearTimeout($DelayHojear);
}
}
$("body").on("click", "#divLetras a", function() {
var letra = $(this).attr("id").substr(0, 1);
var id_letra = $(this).attr("id").substr($(this).attr("id").search(/\d/));
$PagActual = 0;
CargarPagina(letra, id_letra, $PagActual);
});
$("#divDesplazar a").click(function() {
var acc = $(this).attr("id");
if (acc === "first") {
$PagActual = 0;
}
if (acc === "prev" && $PagActual > 0) {
$PagActual--;
}
if (acc === "next" && $PagActual < $TotalPag) {
$PagActual++;
}
if (acc === "last") {
$PagActual = $TotalPag;
}
CargarPagina($LetraAct, $IdLetraAct, $PagActual);
});
$("#divEditar a").click(function() {
var acc = $(this).attr("id");
if (acc === "update" || acc === "delete") {
if ($("[id*=per]").hasClass("selected")) {
var id_persona = $(".selected").attr("id").substr($(".selected").attr("id").search(/\d/));
if (acc === "update") {
GreyBox();
AbrirFormulario("U", id_persona);
}
if (acc === "delete") {
var crud = "D";
$.ajax({type: "POST",
url: "procjson.php",
data: {'crud': crud, 'id_persona': id_persona, 'letra_act': $LetraAct, 'id_letra': $IdLetraAct},
success: function() {
CargarPagina($LetraAct, $IdLetraAct, $PagActual);
}
});
}
} else {
console.log("no");
}
}
if (acc === "add") {
GreyBox();
AbrirFormulario("C", -1);
}
});
$("body").on("submit", "#frmPersonas", function(e) {
e.preventDefault();
$("#fldIdLetraN").val(jQuery.inArray(RemoveAccents($("#fldNombre").val().substr(0, 1)), $aLetras));
$("#fldLetraN").val(RemoveAccents($("#fldNombre").val().substr(0, 1)));
var fd = new FormData($("#frmPersonas")[0]);
$.ajax({type: 'POST',
url: "procjson.php",
cache: false,
data: fd,
processData: false,
contentType: false,
success: function() {
CargarPagina($LetraAct, $IdLetraAct, $PagActual);
$("#form").css("display", "none");
$("#formbg").css("display", "none");
}
});
return false;
});
$("body").on("click", "#divPersonas [id*=p]", function() {
$("#divPersonas [id*=per]").removeAttr("class");
var id_persona = $(this).attr("id").substr($(this).attr("id").search(/\d/));
$("#per" + id_persona).attr("class", "selected");
});
$("body").on("click", "#formbg", function() {
$("#form").css("display", "none");
$("#formbg").css("display", "none");
});
$("body").on("click", "#divPaginas a", function() {
var id_pagina = $(this).attr("id").substr($(this).attr("id").search(/\d/));
CargarPagina($LetraAct, $IdLetraAct, id_pagina);
});
$("#divBusqueda a").click(function() {
var Acc = $(this).attr("id");
if (Acc === "hojear") {
Hojear(true);
}
if (Acc === "search") {
}
});
$("body").on("mouseover", "[id*=per]", function() {
Hojear(false);
});
$("#form").click(function(e) {
e.stopPropagation();
});
$("a").click(function(e) {
return false;
e.preventDefault();
});
</script>
这没有奏效:( – hsanchez
问题是getJSON缓存了文件，所以所有的AJAX请求在成功时都调用了它显示相同数据的函数，所以我把$ .ajaxSetup（{cache：false }）;在文档准备好了，现在它工作正常！ – hsanchez