2017-07-28 120 views
0

我有这个观点,我有一些divs :(我玩阿贾克斯做皮/拍摄,淡入淡出看到我需要的每一个时刻的信息阿贾克斯发布请求不通过表格的数据

@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"> 
     {{ csrf_field() }} 
      <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:(URL是正确的,而且也控制,如果我这样做没有Ajax它的工作原理)

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

    $("#createprojectsubmit").click(function(){ 
     $("#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); 
      } 
     }); 
    }); 
}); 

所有的工作很好,但形式不工作。如果我检查导航器的开发工具,myForm:没有任何东西。如何传递所有数据?包含令牌?

所有帮助将不胜感激,非常感谢。

回答

0

你需要序列化你通过AJAX传递的数据。现在,您只需传递表单的jQuery对象而不是其数据。

... data:$('#myForm').serialize(), ...

您可以在这里这个功能找到文档:http://api.jquery.com/serialize/

+0

喜发送@Tokiin它给我发生错误:POST http://web.loc/admin/projects/postUpload 500(内部服务器错误) send @ jquery.js:9175 ajax @ jquery.js:8656 (匿名)@ cms.js?9ae9: 11 dispatch @ jquery.js:4737 elemData.handle @ jquery.js:4549 –

+0

使用网络选项卡查看错误是什么;它可能是从格式正确的数据到服务器无法访问的任何内容。 – Tokiin

+0

我检查它并且不传递任何数据。是一个内部500服务器错误,没有更多的信息:l –

0

你逝去的整个形态为研究对象,试试下面来代替。注意data

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

嗨@serdar.sanri人也回答这个,它不起作用 –

+0

啊!,我想我知道为什么。尝试这个。而不是$(“#myForm”)。submit(function(e){',try'$(“#myForm”)。on('submit',function(e){e.preventDefault();' –

+0

please man ..阅读代码我把..我有e.preventDefault(); ... –

0

尝试:

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

.serializeArray()的jQuery对象转换成键/值对的阵列,可以在后

+0

Hi @ggradnig it给我一个错误:POST web.loc/admin/projects/postUpload 500(内部服务器错误)send @ jquery.js:9175 ajax @ jquery.js:8656(匿名)@ cms.js?9ae9:11 dispatch @ jquery。 js:4737 elemData.handle @ jquery.js:4549 –