通过 AJAX 向 PHP 发送 JSON 对象会引发 XML 读取错误答案

【问题标题】：Sending JSON object via AJAX to PHP throws XML read error通过 AJAX 向 PHP 发送 JSON 对象会引发 XML 读取错误
【发布时间】：2017-05-24 04:16:55
【问题描述】：

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

我正在制作一个带有表单的网站，其中将注册一个学生并通过 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 is not a function

Error 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"

编辑： JQuery 实际上是一个旧版本，不支持 .done in ajax 并更正了双 JQuery 源

看来主要问题出在 php 代码中

【问题讨论】：

我不确定...但是尝试删除dataType:"json", 末尾的尾随逗号。
为什么要加载两个 jquery 库？使用一个，并将其移动到您的调用 jquery 对象，而无需先加载库。
貌似你包含了两次jQuery，第二次包含的只有v1.4.3。 $.ajax() 返回的 jqXHR 对象直到 v1.5 才开始支持 .done()。

标签： javascript php jquery json ajax

【解决方案1】：

我发现你少了一个分号：

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

先尝试修复语法错误。

【讨论】：

实际上分号就在那里，并且firefox的控制台没有标记任何其他语法错误