javascript - 我想在提交表单后显示警报，PHP，JAVASCRIPT，HTML，AJAX

Question

当表格发送到银行时，我想要它，它会发出类似“您的消息已发送”的警报，否则它看起来像“发送您的消息时出错”。问题是我使用的代码没有显示警报，但它显示在屏幕“1”的 Angular 落。

<?php 


    if(!empty($_FILES['uploaded_file'])){
        $username = 'root';
        $password = '';
        $connection = new PDO( 'mysql:host=localhost;dbname=nise', $username );

        $query = "INSERT INTO denuncia (descricao, imagem, id_usuario, qual_descricao,id_bloco, id_denuncia_oque) 
              VALUES (:descricao, :imagem, :id_usuario, :qual_descricao, :id_bloco, :id_denuncia_oque)";

        $statement = $connection->prepare($query);





        $path = "img_denuncia/";
        $path = $path . basename( $_FILES['uploaded_file']['name']);
        if(move_uploaded_file($_FILES['uploaded_file']['tmp_name'], $path))



        $valores = array();
        $valores[':descricao'] = $_POST['descricao_denuncia'];
        $valores[':imagem'] = $_FILES['uploaded_file']['name'];
        $valores[':id_usuario'] = 2;
        $valores[':qual_descricao'] = $_POST['qual_descricao'];
        $valores[':id_bloco'] = $_POST['bloco_denuncia'];
        $valores[':id_denuncia_oque'] = $_POST['id_denuncia_oque'];



    if( $result = $statement->execute($valores))
        {
         echo 1; // dados enviados com sucesso
        }
        else
        {
        // na verdade o else não é necessário mas se preferir pode colocar
         echo 0; // erro ao tentar enviar dados 
        }
}
?>

这里是ajax。 ---- 这是我第一次使用 AJAX，如果可能的话你可以告诉我为什么它不起作用，我错了。

<script>



 $('#form').submit(function() {
    $.ajax({ 
        data: $(this).serialize(), 
        type: $(this).attr('method'),
        url:"http://localhost/projeto/aluno.php",
        success: function(retorno) {
               if(retorno==1)
              {
                alert("Formulário enviado com seucesso");
              }
               else
              {
                alert("erro ao enviar formulário");
              }
        }
    });
    return false; 
});
</script>

这是我的表格

  <form id="caixa" class="center-block row col-xl-6" enctype="multipart/form-data" name="formulario"  method="POST" action="aluno.php">
    <br>
      <div class="row p-0 no-margin col-12 col-sm-12  col-md-12 col-lg-10 col-xl-12" >
        <div class="form-group">
          <label for="sel1">Bloco:</label>
          <select class="form-control " name="bloco_denuncia" id="bloco" required="required" placeholder="ex: Bloco 3" >
            <option value="" disabled selected>Ex: Computação</option>
            <option value="1">Bloco - Computação</option>
            <option value="2">Bloco - Mecânica</option>
            <option value="3">Bloco - Química</option>
            <option value="4">Bloco - Administrativo</option>
            <option value="5">Biblioteca </option>
            <option value="6">Ginásio </option>
            <option value="7">Auditório</option>
            <option value="0">Outros</option>
          </select>
          </div>
      <div class="form-group">
          <label for="sel1">O que:</label>
          <select select="required" class="form-control" name="id_denuncia_oque" id="sel1" required="required" >
            <option value="" disabled selected>Ex: Laboratório</option>
            <option value="1">Sala</option>
            <option value="2">Banheiro(Térreo)</option>
            <option value="3">Banheiro(Superior)</option>
            <option value="4">Laboratório</option>
            <option value="5">Coordenação</option>
            <option value="6">Gabinete</option>
            <option value="7">Telecom</option>
            <option value="8">Outros</option>

          </select>
          </div>

            <div class="form-group">
              <label for="usr">Qual:</label>
              <input type="text" class="form-control" id="usr" name="qual_descricao" placeholder="ex: ar-condicionado " required="required" >
            </div>

      </div>
       <textarea  id="form-control"class="noresize  col-12 col-sm-12 mb-12 col-md-12 col-lg-10 col-xl-12 " name="descricao_denuncia" placeholder="Faça sua denúncia aqui... " id="denuncia" rows="13" required="required" autofocus="autofocus">
       </textarea>

       <br>
       <div class="row p-0 no-margin col-12 col-sm-12  col-md-12 col-lg-10 col-xl-12">  
            <div class="botao p-0 no-margin col-6 col-sm-6 mb-3 col-md-6 col-lg-2 col-xl-10">
           <label class="file-upload btn btn-primary">
                Escolha o arquivo... <input  type="file" name="uploaded_file"/ accept="image/*">
            </label>  
           <small class="form-text text-muted">As suas mensagens não serão totalmente anônimas.</small>
            </div>
          <div class="botao p-0 no-margin col-6 col-sm-6 mb-3 col-md-6 col-lg-10 col-xl-2 text-right ">
               <input id="b_enviar" type="submit" class="btn btn-success" value="Enviar" name="enviar"/>
          </div>
      </div>
    </form>
    <br>
    <!--Fim da caixa-->

如果您有 JavaScript 解决方案，可以将其发送给我

Answer 1

jquery 选择器上的 id 是 #form，但它应该是 #caixa，因为您在表单元素上声明了 id=caixa 而不是 id=form。

同时在函数参数内添加e，然后在函数内添加e.preventDefault。 PreventDefault() 将阻止表单实际提交并避免导航到操作页面。

另外将脚本标记放在正文标记的末尾，以确保目标元素已加载。

试试这个；

$('#caixa').submit(function(e) {
    e.preventDefault();

    var formData = $(this).serialize();

    $.ajax({ 
        data: formData, 
        type: "post",
        url:"http://localhost/projeto/aluno.php",
        success: function(retorno) {
              if(retorno=='1' || retorno==1)
              {
                alert("Formulário enviado com seucesso");
              }
               else
              {
                alert("erro ao enviar formulário");
              }
        }
    });
    return false; 
});