Question

我正在尝试使用ajax制作一些东西并且它不起作用。

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

视图的代码如下：

@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和淡入第二个作品的功能，它提交并创建新项目。但网址改变并向我显示一个白页。

我要做的第一件事是fadeOut form1和fadein第二种形式。这将是很好的，如果当fadeOut 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

这是因为您正在混合两种方式来处理表单的提交：点击按钮和表单提交本身。

在脚本中调用的函数submit正在点击按钮时绑定submit事件。

以下是仅在submit的{{1}}事件中绑定代码的方式：

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); } }); }); });上的click事件来处理button并通过调用表单上的animations函数来触发表单提交。

然后，我们绑定submit上的submit事件来处理form电话，以取代ajax表单提交。

使用ajax重定向提交表单

2 个答案: