需要做一个提交没有重定向页面(ajax?)

Question

我有一个视图，我拉数据与"onclick"阿西格纳"的;按钮，当我点击"羡慕公式"按钮，电子邮件直接发送与加载的数据…这工作得很好，但我希望它被发送到邮件，而不是重定向到另一个页面。

我的表单代码

<form action="{{route('contactanos.store')}}" method="POST">
{{ csrf_field() }}


<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label for="inspector">Inspector</label>
<select class="form-select col-xs-12 col-sm-12 col-md-12" aria-label="Default select example" id="inspector" for="inspector" name="inspector" >
<option selected></option>
@foreach($users as $user)
<option value="{{ $user->name }}">{{ $user->name }}</option>

@endforeach
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<label for="estado">Estado</label>
<select class="form-select col-xs-12 col-sm-12 col-md-12" aria-label="Default select example" id="estado" for="estado" name="estado">
<option selected></option>
<option value="Pendiente">Pendiente</option>
<option value="Coordinado">Coordinado</option>

<option value="Peritando">Derivado a inspector</option>

<option value="Baja">Baja</option>
</select>
</div>

<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label for="localidad">Localidad</label>
<input type="text" name="localidad" id="localidad" class="form-control" >
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label for="fechaip">Fecha IP</label>
<input type="date" name="fechaip" id="fechaip" class="form-control" >
</div>
</div>

<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label for="siniestro">Siniestro</label>
<input type="text" name="siniestro" id="siniestro" class="form-control" >
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label for="inspector">Inspector</label>
<select class="form-select col-xs-12 col-sm-12 col-md-12" aria-label="Default select example" id="emailperito" for="emailperito" name="emailperito" >
<option selected></option>
@foreach($users as $user)
<option value="{{ $user->email }}">{{ $user->name }}</option>

@endforeach
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label for="email">Email taller</label>
<input type="text" name="email" id="email" class="form-control"  >
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label for="patente">Patente</label>
<input type="text" name="patente" id="patente" class="form-control" >
</div>
</div>

<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label for="modalidad">Tipo de inspección</label>
<input type="text" name="modalidad" id="modalidad" class="form-control" >
</div>
</div>
<input type="hidden" id="id">
<button type="submit" id="updateButton" class="btn btn-success" onclick="updateData(event)">Guardar</button>
<button type="submit"  class="btn btn-primary float-right">Enviar formulario</button>


</form>

控制器发送邮件代码

<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;

//mail
use AppMailContactanosMailable;
use IlluminateSupportFacadesMail;
use AppModelsSiniestro;

class CoordinacionesController extends Controller
{
public function index(){
return view('contactanos.index');
}
public function store(Request $request){

$siniestro = Siniestro::paginate(1000);
$this->siniestro = $siniestro;


$email = $this->siniestro['emailperito'];
$cc = $this->siniestro['email'];

$correo = new ContactanosMailable($request->all());
Mail::to($email)->cc($cc)->send($correo);
return redirect()->route('siniestros.index');

}
}

View.blade

我的观点

我已经尝试删除post方法并删除"return redirect()- route(' sisters .index');"的控制器，但它不工作。

Answer 1

您可以使用像这样的ajax

$.ajax({
url: '{{route("your-route")}}',
method: "POST",
data: {
_token: '<?php echo csrf_token() ?>',
... // the rest of your form
}
})

Answer 2

试试这个方案

在刀片文件中添加jquery

jquery cdn

<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>

给你的表单赋予class

<form action="{{route('contactanos.store')}}" method="POST" class="my_form">

按照下面的修改你的javascript代码

$(document).on('submit', '.my_form', function (event) {
event.preventDefault();
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function (response) {
if(response.success){
//handle success message
} else {
//handle error message
}
},
error: function (xhr, textStatus, errorThrown) {
console.log("ERROR");
}
});
});

更改控制器->store函数

public function store(Request $request){
try {
$siniestro = Siniestro::paginate(1000);
$this->siniestro = $siniestro;
$email = $this->siniestro['emailperito'];
$cc = $this->siniestro['email'];
$correo = new ContactanosMailable($request->all());
Mail::to($email)->cc($cc)->send($correo);
return response()->json([
'success' => true,
'message' => 'Your success message'
]);
} catch (Throwable $th) {
return response()->json([
'success' => false,
'message' => 'Your error message'
]);
}
}