问题描述
我试图将下拉选择的选项传递给AJAX查询参数，并且我在有效负载中得到 null 。
如果我console.log()选定的选项，我可以得到正确的值，但似乎无法将其传递给AJAX查询参数选项。
我的代码中可以穿什么？
<label class="col-form-label">{{ __('general.labels.marketcenter') }}</label>
<div class="col-xl-2 col-sm-2">
<select class="form-control" id="kt_market_center_dropdown">
<option value=""></option>
@foreach($market_center_dropdown as $market_center)
<option value="{{ $market_center->id }}">{{ $market_center->mc_name }}</option>
@endforeach
</select>
</div>
<label class="col-form-label">{{ __('general.labels.megaagent') }}</label>
<div class="col-xl-2 col-sm-2">
<select class="form-control" id="kt_mega_agent_dropdown">
<option value=""></option>
@foreach($mega_agent_dropdown as $mega_agent)
<option value="{{ $mega_agent->id }}">{{ $mega_agent->megaagent_name }}</option>
@endforeach
</select>
</div>
<label class="col-form-label">{{ __('general.labels.teams') }}</label>
<div class="col-xl-2 col-sm-2">
<select class="form-control" id="kt_team_dropdown">
<option value=""></option>
@foreach($teams_dropdown as $teams)
<option value="{{ $teams->id }}">{{ $teams->team_name }}</option>
@endforeach
</select>
</div>
这是我的JavaScript代码（console.log($("#kt_market_center_dropdown option:selected").val());代码从下拉列表中获取了正确的值，并且与ajax查询参数中的代码相同）
"use strict";
var KTDatatableChildRemoteDataDemo = {
init: function () {
var t;
t = $(".kt-datatable").KTDatatable({
data: {
type: "remote",source: {
read: {
url: "/dashboard/exclusive",method: 'GET',dataType: "json",contentType: "application/json",params: {
query: {
market_center: $("#kt_market_center_dropdown option:selected").val(),mega_agent: $("#kt_mega_agent_dropdown option:selected").val(),team: $("#kt_team_dropdown option:selected").val()
}
}
}
},pageSize: 10,serverPaging: !0,serverFiltering: !1,serverSorting: !0
},layout: {
scroll: !0,height: 1000,footer: !1
},sortable: false,toolbar: {
items: {
info: false,}
},pagination: !0,detail: {
title: "Cargando tabla",content: function (t) {
$("<div/>").attr("id","child_data_ajax_" + t.data.id).appendTo(t.detailCell).KTDatatable({
data: {
type: "remote",source: {
read: {
url: "/dashboard/exclusive/details",params: {
query: {
id: t.data.id,exclusive: $('#kt_form_exclusive').prop("checked") ? "Exclusiva" : "",open: $('#kt_form_open').prop("checked") ? "No Exclusiva" : "",sale: $('#kt_form_sale').prop("checked") ? "Venta" : "",rent: $('#kt_form_rent').prop("checked") ? "Alquiler" : ""
}
}
}
},serverPaging: true,serverFiltering: true,serverSorting: true
},layout: {
scroll: !0,height: 800,footer: false,spinner: {
type: 1,theme: "default"
}
},toolbar: {
items: {
info: false,}
},translate: {
records: {
norecords: 'No se encontraron registros',processing: 'Por favor espere...'
},toolbar: {
pagination: {
items: {
default: {
first: 'Primero',prev: 'Anterior',next: 'Siguiente',last: 'Ultimo',more: 'Más',input: 'Nro. Página',select: 'Seleccione cantidad',all: 'todos',},info: 'Mostrando {{start}} - {{end}} of {{total}}',}
},rows: {
beforeTemplate: function(row,data,index) {
if (data.prop_type == 'TOTAL CANTIDAD' || data.prop_type == 'TOTAL VOLUMEN') {
$(row).css('background-color','#F7F8FA');
}
},columns: [ {
field: "prop_type",title: "Tipo",width: 110
},{
field: "ENE",title: "ENE",width: 70,textAlign: "center",type: "number"
},{
field: "FEB",title: "FEB",{
field: "MAR",title: "MAR",{
field: "ABR",title: "ABR",{
field: "MAY",title: "MAY",{
field: "JUN",title: "JUN",{
field: "JUL",title: "JUL",{
field: "AGO",title: "AGO",{
field: "SEP",title: "SEP",{
field: "OCT",title: "OCT",{
field: "NOV",title: "NOV",{
field: "DIC",title: "DIC",{
field: "TOTAL",title: "TOTAL",width: 80,type: "number"
}
]
})
}
},search: {
input: $("#generalSearch")
},columns: [{
field: "id",title: "",sortable: !1,width: 30,textAlign: "center"
},{
field: "name",title: "Asociado",width: 200,autoHide: false,// callback function support for column rendering
template: function (data) {
var output = '';
if(data.avatar) {
output = '' +
'<div class="kt-user-card-v2">' +
'<div class="kt-user-card-v2__pic">' +
'<img src="' + data.avatar + '" alt="photo">' +
'</div>' +
'<div class="kt-user-card-v2__details">' +
'<a href="#" class="kt-user-card-v2__name">' + data.name + '</a>' +
'<span class="kt-user-card-v2__desc">' + data.role + '</span>' +
'<span class="kt-user-card-v2__desc"></span>' +
'</div>' +
'</div>';
} else {
output = '' +
'<div class="kt-user-card-v2">' +
'<div class="kt-user-card-v2__pic">' +
'<div class="kt-badge kt-badge--xl kt-badge--primary">KW</div>' +
'</div>' +
'<div class="kt-user-card-v2__details">' +
'<a href="#" class="kt-user-card-v2__name">' + data.name + '</a>' +
'<span class="kt-user-card-v2__desc">' + data.role + '</span>' +
'<span class="kt-user-card-v2__desc"></span>' +
'</div>' +
'</div>';
}
return output;
}
},{
field: "mc_name",title: "Market Center",{
field: "megaagent_name",title: "Mega Agente",{
field: "kw_start_date",title: "Ingreso KW",{
field: "kw_en_date",title: "Salida KW",{
field: "status",title: "Estado",template: function (t) {
var e = {
Activo: {
title: "Activo",class: " kt-badge--success"
},Inactivo: {
title: "Inactivo",class: " kt-badge--danger"
}
};
return '<span class="kt-badge ' + e[t.status].class + ' kt-badge--inline kt-badge--pill">' + e[t.status].title + "</span>"
}
}
]
}),$("#kt_market_center_dropdown").on("change",function () {
$(".kt-datatable").KTDatatable("reload");
console.log($("#kt_market_center_dropdown option:selected").val());
}),$("#kt_mega_agent_dropdown").on("change",function () {
$(".kt-datatable").KTDatatable("reload");
}),$("#kt_team_dropdown").on("change",function () {
$(".kt-datatable").KTDatatable("reload");
}),$("#kt_form_exclusive").on("change",$("#kt_form_open").on("change",$("#kt_form_sale").on("change",$("#kt_form_rent").on("change",function () {
$(".kt-datatable").KTDatatable("reload");
})
}
};
jQuery(document).ready(function () {
KTDatatableChildRemoteDataDemo.init()
});
解决方法
由于这是 GET 请求，您可以更改
params: { query: {...} }
仅：
data: {...}
除非您设置processData = false。