用ajax提交表单而不进行重定向

Question

我想用ajax做一些事情，但它不起作用。

我有一些视图，其中我将成为页面的所有功能。

视图的代码是这样的：

@extends('cms.public.layouts.default') 
@section('content') 

<div class="col-md-10"> 
    <h3 style="letter-spacing:40px;text-align:center;color:f15d5e;">PROYECTOS</h3> 
</div> 

<div id="listall"> <!-- DIV TO LIST ALL THE PROJECTS START HERE --> 
     <div class="col-md-2" style="padding:20px;"> 
      <button type="button" id="buttoncreate" class="btn btn-danger">Crear Proyecto</button> 

     </div> 
         <table class="table"> 
        <thead style="color:white"> 
        <tr> 
         <th>Id</th> 
         <th>Slug</th> 
         <th>Order</th> 
         <th>Public</th> 
         <th>Path header</th> 
         <th>Path home</th> 
         <th>Fecha creación</th> 
         <th>Fecha ultima actualización</th> 
         <th><span class="glyphicon glyphicon-cog"></span></th> 
        </tr> 
        </thead> 
        <tbody style="color:white"> 
        @foreach ($projects as $key => $project) 
        <tr> 
         <th>{{$project->id}}</th> 
         <td>{{$project->slug}}</td> 
         <td>{{$project->order}}</td> 
         <td>{{$project->public}}</td> 
         <td>{{$project->pathheader}}</td> 
         <td>{{$project->pathhome}}</td> 
         <td>{{ date('M j, Y', strtotime($project->created_at))}}</td> 
         <td>{{ date('M j, Y', strtotime($project->updated_at))}}</td> 
         <td><a href="{{ route('admin.projects.show', $project->id)}}" class="btn btn-info btn-sm">View</a> <a href="{{ route('admin.project.edit', $project->id)}}" class="btn btn-success btn-sm">Edit</a> 
        @endforeach 
        </tr> 
        </tbody> 
       </table> 
    <br><br> 
</div> <!-- DIV TO LIST ALL THE PROJECTS END HERE --> 

<div id="form1" style="display:none;" class="col-md-8"> <!-- DIV TO SHOW THE CREATE PROJECT FORM 1 START HERE--> 
    <div> 
    <h3>Crear nuevo proyecto</h3> 
    </div> 



    <div id="formcreateproject"> 

     <form method="POST" action="{{ route('admin.projects.store') }}" enctype="multipart/form-data" id="myForm" name="myForm"> 
      <div class="form-group"> 
      <label name="title">Slug:</label> 
      <input type="text" id="slug" name="slug" placeholder="ejemplo-de-slug" class="form-control form-control-sm"> 
      <label name="order">Order:</label> 
      <input type="number" id="order" name="order" class="form-control form-control-sm"> 
      <label name="public">Public:</label> 
      <input type="number" id="public" name="public" class="form-control form-control-sm"> 
      <label name="body">Header</label> 
      <input type="file" name="pathheader" id="pathheader" class="form-control-file" aria-describedby="fileHelp"><br> 
      <label name="body">Home</label> 
      <input type="file" name="pathhome" id="pathhome" class="form-control-file" aria-describedby="fileHelp"><br> 

      <input type="submit" value="Crear Proyecto" id="createprojectsubmit" class="btn btn-danger btn-md"> 
      <input type="hidden" name="_token" value="{{ Session::token() }}"> 
      <br><br><br> 

      </div> 
     </form> 

     </div> 
</div> <!-- DIV TO SHOW THE CREATE PROJECT FORM 1 END HERE--> 

<div id="form2" style="display:none;" class="col-md-6"> 
<div class="col-md-"> 
    <h3>Crear nuevo proyecto</h3> 
    </div> 
     <form method="POST" action="{{ route('admin.projects.store') }}" enctype="multipart/form-data"> 
      <div class="form-group"> 
      <label name="title">Slug:</label> 
      <input type="text" id="slug" name="slug" placeholder="ejemplo-de-slug" class="form-control form-control-sm"> 
      <label name="order">Order:</label> 
      <input type="number" id="order" name="order" class="form-control form-control-sm"> 
      <label name="public">Public:</label> 
      <input type="number" id="public" name="public" class="form-control form-control-sm"> 
      <label name="body">Header</label> 
      <input type="file" name="pathheader" id="pathheader" class="form-control-file" aria-describedby="fileHelp"><br> 
      <label name="body">Home</label> 
      <input type="file" name="pathhome" id="pathhome" class="form-control-file" aria-describedby="fileHelp"><br> 

      <input type="submit" value="Crear Proyecto" id="createprojectsubmit" class="btn btn-danger btn-md"> 
      <input type="hidden" name="_token" value="{{ Session::token() }}"> 
      <br><br><br> 

      </div> 
     </form> 
</div> 

</div> 
@stop 

以及JavaScript函数是这样的：

//Javascript view /projects/menu.blade.php 
$(document).ready(function(){ 
    $("#buttoncreate").click(function(){ 
     $("#listall").hide(); 
     $("#form1").fadeIn(1000); 
     $("#createprojectsubmit").submit(function(e){ 
      e.preventDefault(); 
      $.ajax({ 
       url:'/admin/projects/postUpload', 
       type:'post', 
       data:$('#myForm'), 
       success: function(){ 
        $("#form1").fadeOut(1000); 
        $("#form2").fadeIn(1000); 
       } 
      }); 
     }); 
     }); 
}); 

隐藏第一个div和第二工程褪色，并提交和创建的功能新项目。但网址更改并显示一个白页。

我要做的第一件事就是淡出form1，淡入淡出第二种形式。这将是伟大的，如果当淡出form1，在她的空间出现勾选/检查。

非常感谢，任何帮助将不胜感激。

Answer 1

你打电话给submit事件按钮不属于按钮。它属于形式。所以调用click事件上的按钮，然后使用preventDefault()停止的形式提交的

$("#createprojectsubmit").submit(function(e){ 
    e.preventDefault(); 
    //your further code goes here 
} 

使用这样

$("#createprojectsubmit").click(function(e){ 
    e.preventDefault(); 
    //your further code goes here 
} 

您也可以触发对submit事件您form作为

$("#myForm").submit(function(e){ 
    e.preventDefault(); 
    //your further code goes here 
} 

Answer 2

这是因为你正在混合2种方式来处理表单的提交：点击对接和表单提交本身。

您在脚本中调用的功能submit正在点击按钮时绑定submit事件。

这里是如何将代码绑定只在submit事件您form的：

$(document).ready(function(){ 
    $("#buttoncreate").click(function(){ 
     $("#listall").hide(); 
     $("#form1").fadeIn(1000); 
     $("#myForm").submit(); 
    }); 

    $("#myForm").submit(function(e){ 
     e.preventDefault(); 
     $.ajax({ 
      url:'/admin/projects/postUpload', 
      type:'post', 
      data:$('#myForm'), 
      success: function(){ 
       $("#form1").fadeOut(1000); 
       $("#form2").fadeIn(1000); 
      } 
     }); 
    }); 
}); 

编辑：编辑答案账户采取按钮的点击。

首先，我们绑定button上的click事件来处理animations，并通过在表单上调用submit函数来触发表单提交。

然后，我们绑定submit事件的form来处理更换classic postback表单提交的ajax调用。