AJAX无法从输入中获取数据

Question

我正在尝试创建/插入数据到数据库中，但我仍然得到一个错误获得我输入的数据。我尝试使用dump和die方法，并且我遇到没有从已输入的数据中获取数据的情况。我的密码有什么问题吗?

下面是被检查元素

的结果点击查看图片

我的模态

<div id="modalAddChild" class="modal fade" tabindex="-1" aria-labelledby="modalAddChild">
@csrf_field
{{ method_field('PUT') }}
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><b>Add Child</b></h4>
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">X</button>
</div>
<div class="modal-body">
<p><i>Note: In Weight, it is required to put (.) regardless if it is (.0).</i></p>
<p><i>Note: In Height, do not add (.) if it is (.0) but it is allowed to put (.) if it's any number.</i>
</p>
<form id="saveChild" method="post">
<div class="form-group row">
<div class="col-sm-6">
<label for="mothersname">Mother's Name:</label>
<input type="text" class="form-control" id="mothersname" name="mothersname" required>
</div>
<div class="col-sm-6">
<label for="childsname">Child's Name:</label>
<input type="text" class="form-control" id="childsname" name="childsname" required>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label>Indigenous:</label>
<select class="form-control" id="ind_id" name="ind_id" required>
<option value="">YES or NO</option>
@foreach ($indigenous as $key => $value)
<option id="{{ $key }}" value="{{ $key }}">{{ $value }}</option>
@endforeach
</select>
</div>
<div class="col-sm-6">
<label>Sex:</label>
<select class="form-control" id="sex_id" name="sex_id" required>
<option value="">M or F</option>
@foreach ($sex as $key => $value)
<option id="{{ $key }}" value="{{ $key }}">{{ $value }}</option>
@endforeach
</select>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label>Date of Birth:</label>
<input type="text" class="form-control" id="birthdate" name="birthdate"
placeholder="YYYY-MM-DD" required>
</div>
<div class="col-sm-6">
<label>Actual Date of Weighing:</label>
<input type="text" class="form-control" id="actualdate" name="actualdate"
placeholder="YYYY-MM-DD" required>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label>Weight(kg):</label>
<input type="text" class="form-control" id="weight" name="weight" required>
</div>
<div class="col-sm-6">
<label>Height(cm):</label>
<input type="text" class="form-control" id="height" name="height" required>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label for="zone">Zone:</label>
<input type="text" class="form-control" id="zone" name="zone" required>
</div>
<div class="col-sm-6">
<label>Age in Months:</label>
<input type="text" class="form-control" id="ageinmonths" name="ageinmonths" required>
</div>
</div>
<div class="form-group">
<button type="submit" value="Submit" class="btn btn-flat btn-primary" id="saveBtn">Submit</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<<p>我的AJAX/strong>

<script type="text/javascript">
$('#saveChild').submit('click', function() {
var zone = $('#zone').val();
var mothersname = $('#mothersname').val();
var childsname = $('#childsname').val();
var ind_id = $('#ind_id').val();
var sex_id = $('#sex_id').val();
var birthdate = $('#birthdate').val();
var actualdate = $('#actualdate').val();
var weight = $('#weight').val();
var height = $('#height').val();    
var ageinmonths = $('#ageinmonths').val();
var dataString="zone="+zone+"&mothersname="+mothersname+"&childsname="+childsname+"&ind_id="+ind_id+"&sex_id="+sex_id
+"&birthdate="+birthdate+"&actualdate="+actualdate+"&weight="+weight+"&height="+height+"&ageinmonths="+ageinmonths;    
$.ajax({
type: "POST",
dataType: "JSON",
data: dataString,
url: "insert_child",
success: function(data) {
console.log(data);
if (data == "success"){
alert("Data successfully added!");
} else if (data = "failed") {
alert("ERROR IN FETCHING DATA!");
}
displayData();
}
});
return false;
});
$('#saveBtn').click(function() {
$('#modalAddChild').modal('hide');
});
$('#modalAddChild').on('hidden.bs.modal', function(e) {
$(this)
.find("input,textarea,select")
.val('')
.end()
.find("input[type=checkbox], input[type=radio]")
.prop("checked", "")
.end();
})
</script>

这个旧的ajax是工作之前，但我把它改为ajax上面提到的，但他们都不再工作了。

My OLD Ajax

<script type="text/javascript">
$('#saveChild').submit('click', function() {
var zone = $('#zone').val();
var mothersname = $('#mothersname').val();
var childsname = $('#childsname').val();
var ind_id = $('#ind_id').val();
var sex_id = $('#sex_id').val();
var birthdate = $('#birthdate').val();
var actualdate = $('#actualdate').val();
var weight = $('#weight').val();
var height = $('#height').val();
var ageinmonths = $('#ageinmonths').val();
$.ajax({
type: "POST",
dataType: "JSON",
data: {
zone: zone,
mothersname: mothersname,
childsname: childsname,
ind_id: ind_id,
sex_id: sex_id,
birthdate: birthdate,
actualdate: actualdate,
weight: weight,
height: height,
ageinmonths: ageinmonths,
"_token": "{{ csrf_token() }}"
},
url: "insert_child",
success: function(data) {
alert("Data successfully added!");
displayData();
}
});
return false;
});
$('#saveBtn').click(function() {
$('#modalAddChild').modal('hide');
});
$('#modalAddChild').on('hidden.bs.modal', function(e) {
$(this)
.find("input,textarea,select")
.val('')
.end()
.find("input[type=checkbox], input[type=radio]")
.prop("checked", "")
.end();
})
</script>

Answer 1

在Java脚本的第一行中:

$('#saveChild').submit('click', function() 

这是错误的，jquery提交事件只获得一个函数，但你传递了一个'click'事件。

你应该这样写:

$('#saveChild').submit(function()...