我想问一下拉拉维尔的阿贾克斯。
在这里，我进行个人资料更新。
以前使用 ajax 都按预期工作。但出于某种原因，我被要求使用Ajax。
这在我的控制器文件中。
/**
* Update the specified resource in storage.
*
* @param IlluminateHttpRequest $request
* @param int $id
* @return IlluminateHttpResponse
*/
public function update()
{
$data = $this->request->all();
// return $data;
$validator = Validator::make(
$data,
[
'address' => 'required',
'postal_code' => 'required|max:5',
'country' => 'required',
'province_id' => 'required|exists:indoregion_provinces,id',
'city_id' => 'required|exists:indoregion_regencies,id',
],
[
'address.required' => 'Address is required',
'postal_code.required' => 'Postal Code is required',
'postal_code.max' => 'Max character is :max',
'country.required' => 'Country is required',
'province_id.required' => 'Province is required',
'province_id.exists' => 'Province is not exists',
'city_id.required' => 'City is required',
'city_id.exists' => 'City is not exists',
]
);
if ($validator->fails()) {
return redirect()->back()->withErrors($validator->errors());
}
$user = User::findOrFail(Auth::user()->id);
$posted = [];
foreach ($validator->getRules() as $key => $value) {
$val = $this->request->{$key};
if (is_null($val) || $val == '') {
continue;
}
$posted[$key] = $val;
}
foreach ($posted as $key => $value) {
$user{$key} = $value;
}
return redirect('/home')->with(
'success',
'Data profil berhasil disimpan.'
);
}
那么这就是我做的路线。
Route::middleware(['auth', 'isActive', 'not-customer', 'phone-verified'])->group(function () {
// KYC Partner
Route::get('users', 'UsersController@index')->name('users.index');
Route::post('users-update', 'UsersController@update')->name('users.update');
});
最后在我的刀片上应用 ajax。
@extends('layouts.treasury')
@section('before_script')
<link rel="stylesheet" href="{{ asset('assets/css/smart_wizard.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/smart_wizard_theme_dots.min.css') }}">
<script src="{{ asset('assets/js/jquery.smartWizard.min.js')}}"></script>
<script src="{{ asset('assets/js/bootstrap-validation.min.js') }}"></script>
{{-- <script src="{{asset('assets/js/jquery.validate.min.js')}}"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
<style>
.sw-btn-group {
width: 100%;
height: auto;
}
.sw-btn-group-extra {
display: none;
}
/* .error {
color: red
} */
/* .select2 .select2-container .select2-container--default{
width: 100% !important;
} */
@media (max-width: 767px) {
.btn-group .btn {
display: block;
width: 100%;
}
}
</style>
<script>
$(document).ready(function () {
$('#smartwizard').smartWizard({
theme: 'dots',
transitionEffect: 'fade',
transitionSpeed: '400',
lang: { next: 'Next', previous: 'Prev'},
toolbarSettings: {
toolbarButtonPosition: 'left',
showNextButton: true,
showPreviousButton: true,
toolbarExtraButtons: [
$('<button type="submit"></button>').text('Finish').addClass('btn btn--primary-2 text-white sw-btn-extra').on('click', function (e) {
e.preventDefault();
var id_number = $("#id_number").val();
var id_card_scan = $("#id_card_scan").val();
var selfie_scan = $("#selfie_scan").val();
var address = $("#address").val();
var postal_code = $("#postal_code").val();
var country = $("#country").val();
var province_id = $("#province_id").val();
var city_id = $("#city_id").val();
var tax_id_number = $("#tax_id_number").val();
var taxpayer_number_scan = $("#taxpayer_number_scan").val();
var owner_name = $("#owner_name").val();
var account_number = $("#account_number").val();
var bank_id = $("#bank_id").val();
var branch = $("#branch").val();
$.ajax({
type:"POST",
url:"{{ route('users.update') }}",
data:{
'_token': '{{ csrf_token() }}',
"_method" : "POST",
'id_number':id_number,
'id_card_scan':id_card_scan,
'selfie_scan':selfie_scan,
'address':address,
'postal_code':postal_code,
'country':country,
'province_id':province_id,
'city_id':city_id,
'tax_id_number':tax_id_number,
'taxpayer_number_scan':taxpayer_number_scan,
'owner_name':owner_name,
'account_number':account_number,
'bank_id':bank_id,
'branch':branch
},
dataType: "json",
success: function () {
console.log('success');
},
complete: function () {
console.log('complete');
}
});
})
]
}
})
$('#myForm').validate({
rules: {
selfie_scan: {
accept: "image/jpg,image/jpeg,image/png,image/bmp",
filesize: 8388608
},
id_card_scan: {
accept: "image/jpg,image/jpeg,image/png,image/bmp",
card_scan: 8388608
},
selfie_scan: {
accept: "image/jpg,image/jpeg,image/png,image/bmp",
selfie_scan: 8388608
},
taxpayer_number_scan: {
accept: "image/jpg,image/jpeg,image/png,image/bmp",
number_scan: 8388608
},
address: {
required: true
},
postal_code: {
required: true,
minlength: 5
},
country: {
required: true,
},
province_id: {
required: true
},
city_id: {
required: true
},
id_number: {
digits: true,
maxlength: 16
},
tax_id_number: {
digits: true,
maxlength: 15
},
account_number: {
digits: true
}
},
});
$('#smartwizard').on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
var elmForm = $("#form-step-" + stepNumber);
if (stepDirection === 'forward' && elmForm) {
// elmForm.validator('validate');
// var elmErr = elmForm.children('.has-error');
// if (elmErr && elmErr.length > 0) {
// return false;
// }
if ($('#myForm').valid()) {
return true
} else {
return false
}
}
return true;
})
$("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection) {
if($('button.sw-btn-next').hasClass('disabled')){
$('button.sw-btn-next').hide();
$('.sw-btn-group-extra').show(); // show the button extra only in the last page
$('.sw-btn-group-extra').css('width', '50%')
$('.sw-btn-extra').css('width', '100%')
$('.sw-btn-group').css('width', '48%')
$('button.sw-btn-prev').css('width', '100%');
}else{
$('button.sw-btn-next').show();
$('.sw-btn-group').css('width', '100%')
$('.sw-btn-group-extra').hide();
$('button.sw-btn-prev').css('width', '50%');
}
});
})
</script>
@endsection
@section('content')
<section>
<div class="container">
<form action="{{ route('users.update') }}" method="POST" id="myForm" role="form" data-toggle="validator" method="post" accept-charset="utf-8" enctype="multipart/form-data">
@csrf
<div id="smartwizard">
<ul>
<li><a href="#step-1">First<br /></a></li>
<li><a href="#step-2">Second<br /></a></li>
<li><a href="#step-3">Third<br /></a></li>
</ul>
<div>
<div id="step-1" class="">
<div id="form-step-0" role="form" data-toggle="validator">
<div class="form-group">
<label class="control-label">ID Card Number</label>
<input type="text" name="id_number" id="id_number"
onKeyPress="if(this.value.length==16) return false;">
</div>
<div class="form-group">
<label class="control-label">ID Card Picture (Maks. Ukuran 8MB)</label>
{{-- @if(!is_null(Auth::user()->photo))
<img alt="avatar"
src="{{asset(Auth::user()->photo)}}"
class="image--sm rounded"/>
@endif --}}
{{-- <input type="button" value="Pilih File" class="form-control" onclick="document.getElementById('id_card_scan').click()"> --}}
<input type="file" id="id_card_scan" name="id_card_scan" class="form-control" accept="image/*" capture="camera" onchange="document.getElementById('filenameKTP').value=this.value">
<input type="text" id="filenameKTP" class="form-control" style="border: none;background-color: white" placeholder="tidak ada file" disabled>
</div>
</div>
</div>
<div id="step-2" class="">
<div class="form-step-1" role="form" data-toggle="validator">
<div class="form-group">
<label class="control-label">Address</label>
<textarea name="address" id="address" cols="30" rows="3" class="form-control">{{ !is_null(old('address')) ? old('address') : Auth::user()->address }}</textarea>
</div>
<div class="form-group">
<label class="control-label">Postal Code</label>
<input type="number" value="{{ !is_null(old('postal_code')) ? old('postal_code') : Auth::user()->postal_code }}"
name="postal_code"
id="postal_code"
class="form-control">
</div>
<div class="form-group">
<label class="control-label">Country</label>
<select class="country form-control" name="country" id="country">
<option value="">== CHoose Country ==</option>
<option value="ID" selected>Indonesia</option>
</select>
<label id="country-error" class="error" for="country"></label>
</div>
<div class="form-group">
<label class="control-label">Province</label>
<select class="province form-control" name="province_id" id="province_id">
<option value="">== Choose Province ==</option>
@foreach (AppProvince::all() as $province)
<option value="{{ $province->id }}" @if(Auth::user()->province_id == $province->id) selected @endif>{{ $province->name }}</option>
@endforeach
</select>
<label id="province_id-error" class="error" for="province_id"></label>
</div>
<div class="form-group">
<label class="control-label">City</label>
<select class="city form-control" name="city_id" id="city_id">
@if(!is_null(Auth::user()->city_id))
<option value="{{ Auth::user()->city->id }}">{{ Auth::user()->city->name }}</option>
@else
<option value="">== Choose City
==
</option>
@endif
</select>
<label id="city_id-error" class="error" for="city_id"></label>
</div>
</div>
</div>
<div id="step-3" class="">
<div class="form-group">
<label class="control-label">Owner Name</label>
<input type="text" name="owner_name" id="owner_name" class="form-control" value="{{ Auth::user()->name }}">
</div>
<div class="form-group">
<label class="control-label">Account Number</label>
<input type="number" name="account_number" id="account_number"
onKeyPress="if(this.value.length==30) return false;">
</div>
<div class="form-group">
<label class="control-label">Bank Name</label>
<select class="bank" name="bank_id" id="bank_id">
<option value="">== Choose Bank ==</option>
@foreach(AppHttpControllersBankAccountController::getListBank() as $bank)
<option value="{{ $bank->kliringrtgs_code }}">{{ $bank->bank_name }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label class="control-label">Branch (optional)</label>
<input type="text" name="branch" id="branch" value="{{ old('branch') }}">
</div>
</div>
</div>
</div>
</form>
</div>
</section>
@endsection
我希望你们中的一个人能解释为什么会出现此错误以及为什么可以解决它。
我不明白你想要什么，但我建议：
$.ajax({
type:"POST",
url:"{{ route('users.update') }}",
data:{
'_token': '{{ csrf_token() }}',
"_method" : "POST",
'id_number':id_number,
'id_card_scan':id_card_scan,
'selfie_scan':selfie_scan,
'address':address,
'postal_code':postal_code,
'country':country,
'province_id':province_id,
'city_id':city_id,
'tax_id_number':tax_id_number,
'taxpayer_number_scan':taxpayer_number_scan,
'owner_name':owner_name,
'account_number':account_number,
'bank_id':bank_id,
'branch':branch
},
dataType: "json",
success: function (resp) {
console.log('success');
header = resp.getAllResponseHeaders()
//and use informations in header or call resp to access response body
},
});