用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調用。