Ich habe viele Fragen zu diesem Thema gesehen, aber ich habe keine Antwort auf meine Frage gefunden.JSON-Objekt über AJAX an PHP senden löst XML-Lesefehler aus
Ich mache eine Website mit einem Formular, wo man einen Studenten registrieren und senden Sie es als JSON-Objekt zu einem PHP-Skript über AJAX, aber aus welchem Grund es nicht in den Ajax-Teil eingeben.
das ist mein HTML-Code
<!DOCTYPE html>
<html lang='es'>
<!-- Cabecera -->
<head>
<meta charset="utf-8">
<title>Página de registro de alumnos</title>
<!-- CSS, tanto del bootstrap principal como el custom en general -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="./bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="prueba.css">
</head>
<!-- cuerpo en general -->
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Front-End Test</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Registo</a></li>
<li><a href="consulta.html">Consulta</a></li>
</ul>
</div>
</div>
</nav>
<div class="container theme-showcase" role="main">
<!-- descripción general -->
<div class="jumbotron">
<h1>REGISTRO DE ALUMNOS</h1>
<p>Por favor, rellene el siguiente formulario para el registro de alumnos</p>
</div>
</div>
<!-- la parte del formato del formulario -->
<div class="container">
<div class="col-md-4">
<form enctype='application/json' name="alumno" id="alumno">
<h2>Nombre:</h2>
<input type="text" id="nombre" name="nombre"> </input>
<h2>Apellido Paterno:</h2>
<input type="text" id="ap_pat" name="ap_pat"> </input>
<h2>Apellido Materno:</h2>
<input type="text" id="ap_mat" name="ap_mat"> </input>
<h2>Carrera:</h2>
<select id="carrera" name="carrera">
<option selected value="1">SISTEMAS COMPUTACIONALES</option>
<option value="2">QUIMICA</option>
<option value="3">MECATRONICA</option>
<option value="4">ELECTRONICA</option>
<option value="5">ELECTROMECANICA</option>
<option value="6">INDUSTRIAL</option>
<option value="7">LOGISTICA</option>
<option value="8">GESTION EMPRESARIAL</option>
<option value="9">TICS</option>
<option value="10">MAESTRIA EN CIENCIAS DE LA INGENIERIA</option>
<option value="11">MAESTRIA EN CIENCIAS DE LA INGENIERIA AMBIENTAL</option>
<option value="12">DOCTORADO EN CIENCIAS AMBIENTALES</option>
</select>
<h2>Genero:</h2>
<input type="checkbox" id="genero" name="genero"> <label for="genero">Haz click en el recuadro si es hombre</label> </input>
</form>
</div>
</div>
<div id="loader">
</div>
<div class="container">
<p><a class="btn btn-primary btn-lg" role="button" id="boton">Registrar alumno »</a></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-3.2.1.min.js"><\/script>')</script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js" ></script>
<script type="text/javascript" src="./registroscript.js"> </script>
</body>
</html>
das ist mein JavaScipt registroscript.js
$(document).ready(function(){
$("#boton").click(function(){
//validaciones
var specialChars = "<>@!#$%^&*()_+[]{}?:;|'\"\\,./~`-=1234567890¬°~`¨¡¿´¨"
var check = function(string){
if(string.length > 0){
for(i = 0; i < specialChars.length;i++){
if(string.indexOf(specialChars[i]) > -1){
return true;
}
}
return false;
} else {
alert("Por favor, rellene todos los campos");
return true;
}
}
if(!check($('#nombre').val()) && !check($('#ap_pat').val()) && !check($('#ap_mat').val())){
//ajax
var formData = JSON.stringify($("#alumno").serializeArray());
function myFunction() {
document.getElementById("loader").style.display = "inline";
}
$.ajax({
url: "alumnos.php",
data: $("#alumno").serialize(),
type:"POST",
dataType:"json",
})
.done(function (json) {
alert("El alumno ha sido agregado");
})
//en caso de fallo
.fail(function(xhr, status, errorThrown){
alert("Ha ocurrido un problema al momento de enviar el pedido");
})
.always(function(xhr, status){
document.getElementById("loader").style.display = "none";
});
} else {
alert("no se pudo enviar el pedido");
}
});
});
und schließlich das ist das PHP-Skript i für den Test verwendet wurde
<?php
$usuario = $_POST['nombre'];
$ap_pat = $_POST['ap_pat'];
$ap_mat = $_POST['ap_mat'];
$carrera = $_POST['carrera'];
$genero = $_POST['genero'];
$file = fopen('alumno.json','w+');
echo "1: ".$usuario;
echo "2: ".$ap_pat;
echo "3: ".$ap_mat;
echo "4: ".$carrera;
echo "5: ".$genero;
?>
Wenn Ich versuche, den Ajax-Teil in der Firefox-Konsole auszuführen. TypeError: $ .ajax (...). Done ist keine Funktion
Fehler de Lectura XML: no se encuentra el elemento Ubicación: file: /// D: /Proyectos/ITT/Examen%20Front-End/alumnos.php Número de línea 15, Columna 3"
EDIT: die JQuery war in der Tat eine ältere Version, die nicht .done in ajax und korrigiert die doppelte JQuery Quelle
und es scheint, ist das Hauptproblem in der pHP-Code
Ich bin mir nicht sicher ... Aber versuchen Sie, das nachlaufende Koma am Ende von 'dataType:" json ",' zu entfernen. –
Warum laden Sie zwei jquery-Bibliotheken? Verwenden Sie einen, und verschieben Sie ihn an die
Ihre aufrufenden jquery-Objekte, ohne zuerst die Bibliothek zu laden. – Canolyb1Es sieht so aus, als ob du jQuery zweimal eingibst, und die zweite eingeschlossene ist nur v1.4.3. Das jqXHR-Objekt, das von '$ .ajax()' zurückgegeben wurde, begann nicht, '.done()' bis v1.5 zu unterstützen. –