提问人：Ruby 提问时间：8/10/2023 最后编辑：ShibuRuby 更新时间：8/11/2023 访问量：62
将两个 laravel AJAX 函数合并到一个路由中
Merge two laravel AJAX function , in one route
问：
我正在尝试将数据插入数据库，并且我的两个功能都在工作，但是当我尝试使其更短并放置一些常见内容时，它不起作用。 我认为问题出在我的第一个函数中，我正在使用 image，并且对于该 contentType 所有细节都不同，这就是它不起作用的原因
这是我的第一个函数，用于单个输入表单
<script>
// for insert event into database
function insertEvent(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
}
});
var image = $('#image').prop('files')[0];
var formData = new FormData();
formData.append('eventName', $('#eventName').val());
formData.append('image', image);
formData.append('price',$('#price').val());
formData.append('location',$('#location').val());
formData.append('desc',$('#desc').val());
$.ajax({
type: 'POST',
dataType: 'json',
url: '{{ url('/inputForm') }}',
data:
formData,
contentType: false,
processData: false,
success: function(response) {
console.log(response);
var successDiv = document.getElementById('successMessage');
successDiv.innerHTML = response.message;
successDiv.classList.add('alert', 'alert-success');
}
});
}
</script>
这是我的第二个函数，即插入多个表单数据
{{-- for insert custom inpputs into database --}}
<script>
function insertCustomFields() {
const forms = document.querySelectorAll('form[name="addCustomField"]');
const formDataArray = [];
forms.forEach((form, index) => {
const customInputName = form.querySelector('[name="customInputName[]"]').value;
const inputType = form.querySelector('[name="inputType[]"]').value;
const checkboxes = form.querySelectorAll('[name="validation[]"]:checked');
const checkedValues = Array.from(checkboxes).map(checkbox => checkbox.value);
formDataArray.push({
customInputName: customInputName,
inputType: inputType,
checkedValues: checkedValues
});
});
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
}
});
$.ajax({
type: 'POST',
dataType: 'json',
url: '{{ url(' / inputForm ') }}',
data: JSON.stringify(formDataArray), // Convert data to JSON string
contentType: 'application/json', // Set content type to JSON
success: function(response) {
console.log(response);
var successDiv = document.getElementById('successMessage');
successDiv.innerHTML = response.message;
successDiv.classList.add('alert', 'alert-success');
}
});
console.log(formDataArray);
}
第一种形式是单一形式，第二种形式，我正在使用克隆制作副本
<form method="POST" enctype="multipart/form-data" id="addEventForm">
@csrf
<div class="row mb-3">
<label class="col-sm-2 col-form-label" for="basic-icon-default-fullname">Event Name</label>
<div class="col-sm-10">
<div class="input-group input-group-merge">
<span id="basic-icon-default-fullname2" class="input-group-text"
><i class="bx bx-notepad"></i
></span>
<input
type="text"
class="form-control"
id="eventName"
name="eventName"
data-parsley-pattern="[a-zA-Z\s]+$" data-parsley-trigger="keyup" required
data-parsley-errors-container="#eventNameError"
placeholder="Pool Party"
aria-label="Pool Party"
aria-describedby="basic-icon-default-fullname2"
/>
</div>
<div id="eventNameError" class="error-container"></div>
@error('eventName')
<div class="text-danger">
{{$message}}
</div>
@enderror
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 col-form-label" for="basic-icon-default-company">Price</label>
<div class="col-sm-10">
<div class="input-group input-group-merge">
<span id="basic-icon-default-company2" class="input-group-text"
><i class="bx bx-money"></i
></span>
<input
type="number"
id="price"
name="price"
data-parsley-trigger="keyup" required
data-parsley-errors-container="#priceError"
class="form-control"
placeholder="In Rs."
aria-label="In Rs."
aria-describedby="basic-icon-default-company2"
/>
</div>
<div id="priceError" class="error-container"></div>
@error('price')
<div class="text-danger">
{{$message}}
</div>
@enderror
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 col-form-label" for="basic-icon-default-email">Location</label>
<div class="col-sm-10">
<div class="input-group input-group-merge">
<span class="input-group-text"><i class="bx bx-map"></i></span>
<input
type="text"
id="location"
name="location"
data-parsley-trigger="keyup" required
data-parsley-errors-container="#locationError"
class="form-control"
placeholder="India , Gujarat"
aria-label="India , Gujarat"
aria-describedby="basic-icon-default-email2"
/>
</div>
<div id="locationError" class="error-container"></div>
@error('location')
<div class="text-danger">
{{$message}}
</div>
@enderror
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 form-label" for="basic-icon-default-message">Description</label>
<div class="col-sm-10">
<div class="input-group input-group-merge">
<span id="basic-icon-default-message2" class="input-group-text"
><i class="bx bx-comment"></i
></span>
<textarea
id="desc"
name="desc"
data-parsley-trigger="keyup" required
data-parsley-errors-container="#descError"
class="form-control"
placeholder="Write event details"
aria-label="Write event details"
aria-describedby="basic-icon-default-message2"
></textarea>
</div>
<div id="descError" class="error-container"></div>
@error('desc')
<div class="text-danger">
{{$message}}
</div>
@enderror
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 form-label" for="basic-icon-default-message">Select an Image</label>
<div class="col-sm-10">
<div class="input-group input-group-merge">
<span id="basic-icon-default-message2" class="input-group-text"
><i class="bx bxs-image"></i
></span>
<input class="form-control"
type="file" id="image" name="image"
data-parsley-trigger="keyup" required
data-parsley-errors-container="#imageError"
accept="image/png,image/jpeg,image/jpg" />
</div>
<div id="imageError" class="error-container"></div>
@error('image')
<div class="text-danger">
{{$message}}
</div>
@enderror
<div id="preview"></div>
<style>
.center-image {
display: left;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
}
</style>
</div>
</div>
</form>
<div class="row justify-content-end text-end">
<div class="col-sm-10">
<a href="#" class="btn btn-primary" onclick="duplicateForm()" name="add_field" id="add_field">Add Custom Field</a>
</div>
</div>
<div id="customField"></div>
{{-- custom field form starts--}}
<form action="" method="POST" enctype="multipart/form-data" id="addCustomField" name="addCustomField">
<div class="card-body">
<div class="row">
<div class="justify-content-end text-end">
<button class="remove-form" type="button" onclick="removeLastElem()">Remove</button>
</div>
<div class="col-md-6 mb-3">
<label class="form-label" for="customInputName">Custom Input Name</label>
<div class="input-group">
<span class="input-group-text">
<i class="bx bx-notepad"></i>
</span>
<input
type="text"
class="form-control"
required
id="customInputName"
name="customInputName[]"
placeholder="Pool Party"
aria-label="Pool Party"
/>
</div>
</div>
<div class="col-md-6 mb-3">
<label class="form-label" for="inputType">Input Type</label>
<div class="input-group">
<span class="input-group-text">
<i class="bx bx-notepad"></i>
</span>
<select id="inputType" class="form-select" name="inputType[]" required>
<option value="text">Text</option>
<option value="number">Number</option>
<option value="email">Email</option>
<option value="file">File</option>
<option value="hidden">Hidden</option>
</select>
</div>
</div>
</div>
<div class="row">
<label class="col-md-2 col-form-label" for="basic-icon-default-fullname">Validation</label>
<div class="col-md-10">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" value="required" id="required" name="validation[]" checked />
<label class="form-check-label" for="required">Required</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" value="alpha" id="alpha" name="validation[]" />
<label class="form-check-label" for="alpha">Alphabets Only</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" value="/^[a-zA-Z\s]+$/" id="alphaSpace" name="validation[]" />
<label class="form-check-label" for="alphaSpace">Alphabets with Space</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" value="number" id="number" name="validation[]" />
<label class="form-check-label" for="number">Number Only</label>
</div>
</div>
</div>
</div>
</form>```
答：
0赞
Ramisha Mukhtar
8/10/2023
#1
首先合并表单，使用单个标签，将所有元素保留在该表单中，然后合并调用，使用单个提交事件进行单个调用，这样您就可以使其与单个ajax调用一起使用。formajaxAjax
评论
0赞
Ruby
8/10/2023
好的，当然，ajax中的cotentType是什么？
评论
contentTypeweb.phpAJAX