如何解决Ajax Jquery Laravel表单视图“保存”按钮不起作用
单击按钮后,控制台出现错误:app.js:16437 POST laravel.swt101.eu/dynamic-field/insert 500(内部服务器错误)
在此链接上,我有laravel.swt101.eu/dynamic-field/insert Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException 该路由不支持GET方法。支持的方法:POST。
当您可以使用button动态添加输入字段并将数据保存到db时,我正在制作动态表单,但是这样做有一个问题。当我以表格形式写入数据并按保存时,按钮将自身阻塞,并且光标将变为禁止符号。
这是它的模型:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class DynamicField extends Model
{
protected $fillable = [
'name','PKWIU','quantity','unit','netunit','nettotal','VATrate','grossunit','grosstotal'
];
}
这是控制者:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\DynamicField;
use Validator;
class DynamicFieldController extends Controller
{
function index()
{
return view('proforms.create');
}
function insert(Request $request)
{
if($request->ajax())
{
$rules = array(
'name.*' => 'required','PKWIU.*' => 'required','quantity.*' => 'required','unit.*' => 'required','netunit.*' => 'required','nettotal.*' => 'required','VATrate.*' => 'required','grossunit.*' => 'required','grosstotal.*' => 'required',);
$error = Validator::make($request->all(),$rules);
if($error->fails())
{
return response()->json([
'error' => $error->errors()->all()
]);
}
$name = $request->name;
$PKWIU = $request->PKWIU;
for($count = 0; $count < count($name); $count++)
{
$data = array(
'name' => $name[$count],'PKWIU' => $PKWIU[$count],'quantity' => $quantity[$count],'unit' => $unit[$count],'netunit' => $netunit[$count],'nettotal' => $nettotal[$count],'VATrate' => $VATrate[$count],'grossunit' => $grossunit[$count],'grosstotal' => $grosstotal[$count],);
$insert_data[] = $data;
}
DynamicField::insert($insert_data);
return response()->json([
'success' => 'Data Added successfully.'
]);
}
}
}
这是迁移:
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateDynamicField extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('dynamic_fields',function (Blueprint $table) {
$table->string('name')->nullable();
$table->string('PKWIU')->nullable();
$table->string('quantity')->nullable();
$table->string('unit')->nullable();
$table->string('netunit')->nullable();
$table->string('nettotal')->nullable();
$table->string('VATrate')->nullable();
$table->string('grossunit')->nullable();
$table->string('grosstotal')->nullable();
$table->timestamps();
$table->time('deleted_at')->nullable();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('dynamic_fields');
}
}
这是路线:
Route::get('dynamic-field','DynamicFieldController@index');
Route::post('dynamic-field/insert','DynamicFieldController@insert')->name('dynamic-field.insert');
此视图的按钮不起作用,并且鞭子未从第二个表单发送数据,该表单位于页面底部。 它的代码位于底部较大的空白处:
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Laravel 5.8 - DataTables Server Side Processing using Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div id="top" style="position: fixed; top: 0px; left: 20px;">
@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Dodaj nową proformę</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('proforms.index') }}">Wstecz</a>
</div>
</div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('proforms.store') }}" method="POST">
@csrf
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Data wystawienia:</strong>
<input type="text" name="proformdate" class="form-control" placeholder="Data wystawienia">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Kontrahent:</strong>
<br>
<select class="form-controll" name="user_id">
@foreach($users as $user)
<option value="{{$user->id}}">{{$user->showname}}</option>
@endforeach
</select>
<br>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Waluta:</strong>
<br>
<select class="form-controll" name="currency_id">
@foreach($currencys as $currency)
<option value="{{$currency->id}}">{{$currency->currency}}</option>
@endforeach
</select>
<br>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Forma płatności:</strong>
<br>
<select class="form-controll" name="form_id">
@foreach($forms as $form)
<option value="{{$form->id}}">{{$form->form}}</option>
@endforeach
</select>
<br>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Data sprzedaży:</strong>
<input type="text" name="selldate" class="form-control" placeholder="Kategoria">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Termin płatności:</strong>
<input type="text" name="paymentdate" class="form-control" placeholder="Termin płatności">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Forma płatności:</strong>
<input type="text" name="paymentmethod" class="form-control" placeholder="Forma płatności">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Miejsce wystawienia:</strong>
<input type="text" name="city" class="form-control" placeholder="Forma płatności">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Status:</strong>
<input type="text" name="status" class="form-control" placeholder="Status">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Uwagi:</strong>
<input type="text" name="comments" class="form-control" placeholder="Uwagi">
</div>
</div>
<div class="pull-left" style="margin: 35px;">
<h3>Pozycje faktury</h3>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Nazwa towaru lub usługi:</strong>
<input type="text" name="name" class="form-control" placeholder="Data wystawienia">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>PKWiU:</strong>
<input type="text" name="PKWIU" class="form-control" placeholder="Kontrahent">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Ilość:</strong>
<input type="text" name="quantity" class="form-control" placeholder="Kategoria">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Jednostka:</strong>
<input type="text" name="unit" class="form-control" placeholder="Termin płatności">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Cena netto jednostki:</strong>
<input type="text" name="netunit" class="form-control" placeholder="Forma płatności">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Netto razem:</strong>
<input type="text" name="nettotal" class="form-control" placeholder="Forma płatności">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Stawka VAT:</strong>
<input type="text" name="VATrate" class="form-control" placeholder="Status">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Brutto jednostka:</strong>
<input type="text" name="grossunit" class="form-control" placeholder="Uwagi">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Brutto razem:</strong>
<input type="text" name="grosstotal" class="form-control" placeholder="Uwagi">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Zapisz</button>
</div>
</div>
</form>
<p class="text-center text-primary"><small>Artplus 2020</small></p>
</div>
<div class="table-responsive">
<form method="post" id="dynamic_form">
<span id="result"></span>
<table class="table table-bordered table-striped" id="user_table">
<thead>
<tr>
<th width="10%">Nazwa towaru lub usługi</th>
<th width="10%">PKWiU</th>
<th width="10%">Ilość</th>
<th width="10%">Jednostka</th>
<th width="10%">Cena netto</th>
<th width="10%">Netto razem</th>
<th width="10%">Stawka VAT</th>
<th width="10%">Brutto jednostka</th>
<th width="10%">Brutto razem</th>
<th width="10%">Action</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="2" align="right"> </td>
<td>
@csrf
<input type="submit" name="save" id="save" class="btn btn-primary" value="Save" />
</td>
</tr>
</tfoot>
</table>
</form>
@endsection
</div>
</body>
</html>
<script>
$(document).ready(function(){
var count = 1;
dynamic_field(count);
function dynamic_field(number)
{
html = '<tr>';
html += '<td><input type="text" name="name[]" class="form-control" /></td>';
html += '<td><input type="text" name="PKWIU[]" class="form-control" /></td>';
html += '<td><input type="text" name="quantity[]" class="form-control" /></td>';
html += '<td><input type="text" name="unit[]" class="form-control" /></td>';
html += '<td><input type="text" name="netunit[]" class="form-control" /></td>';
html += '<td><input type="text" name="nettotal[]" class="form-control" /></td>';
html += '<td><input type="text" name="VATrate[]" class="form-control" /></td>';
html += '<td><input type="text" name="grossunit[]" class="form-control" /></td>';
html += '<td><input type="text" name="grosstotal[]" class="form-control" /></td>';
if(number > 1)
{
html += '<td><button type="button" name="remove" id="" class="btn btn-danger remove">Remove</button></td></tr>';
$('tbody').append(html);
}
else
{
html += '<td><button type="button" name="add" id="add" class="btn btn-success">Add</button></td></tr>';
$('tbody').html(html);
}
}
$(document).on('click','#add',function(){
count++;
dynamic_field(count);
});
$(document).on('click','.remove',function(){
count--;
$(this).closest("tr").remove();
});
$('#dynamic_form').on('submit',function(event){
event.preventDefault();
$.ajax({
url:'{{ route("dynamic-field.insert") }}',method:'post',data:$(this).serialize(),dataType:'json',beforeSend:function(){
$('#save').attr('disabled','disabled');
},success:function(data)
{
if(data.error)
{
var error_html = '';
for(var count = 0; count < data.error.length; count++)
{
error_html += '<p>'+data.error[count]+'</p>';
}
$('#result').html('<div class="alert alert-danger">'+error_html+'</div>');
}
else
{
dynamic_field(1);
$('#result').html('<div class="alert alert-success">'+data.success+'</div>');
}
$('#save').attr('disabled',false);
}
})
});
});
</script>
解决方法
我忘了在控制器中定义变量。之后,更改按钮将起作用。
$name = $request->name;
$PKWIU = $request->PKWIU;
$quantity = $request->quantity;
$unit = $request->unit;
$netunit = $request->netunit;
$nettotal = $request->nettotal;
$VATrate = $request->VATrate;
$grossunit = $request->grossunit;
$grosstotal = $request->grosstotal;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。