提交表单而不使用 ajax 重定向

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并在第二个中淡入淡出的功能，它提交并创建新项目。但是网址更改并向我显示一个白页。

我要做的第一件事是淡出表单 1 并淡入第二种形式。如果淡出form1时，在她的空间中出现一个勾号/检查，那就太好了。

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

Answer 1

您正在调用不属于按钮submit按钮上的事件。它属于形式。因此，调用click事件 on 按钮并使用preventDefault()停止要提交的表单

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

像这样使用

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

您还可以在form上触发submit事件，如下所示

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

Answer 2

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

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

以下是仅在form的submit事件上绑定代码的方法：

$(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。

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