Question

我看过很多关于这个话题的问题，但我没有找到任何答案。

我正在建立一个网站，其中一个表格会注册一个学生并通过AJAX将其作为JSON对象发送到php脚本，但无论如何它都不会进入ajax部分。

这是我的HTML代码

<!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 &raquo;</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>

这是我的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");
    }
});
});

最后这是我用来测试的PHP脚本

<?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;
?>

当我尝试运行ajax部分时，在firefox的控制台中“TypeError：$ .ajax（...）。done不是函数

错误de lectura XML：没有se encuentra el elemento Ubicación：file：/// D：/Proyectos/ITT/Examen%20Front-End/alumnos.php Númerodelínea15，columna 3“

编辑：事实上，JQuery是一个旧版本，它不支持ajax中的.done并纠正了双JQuery源代码

似乎主要问题在于PHP代码

Answer 1

我发现你错过了一个分号：

var specialChars = "<>@!#$%^&*()_+[]{}?:;|'\"\\,./~`-=1234567890¬°~`¨¡¿´¨";

首先尝试修复语法错误。

通过AJAX将JSON对象发送到PHP会引发XML读取错误

1 个答案: