为什么我的ajax帖子不起作用?页面正在刷新

Question

// save new employee record
$('#saveEmpForm').submit('click',function(){
var empInputId = $('#input_id').val();
var empJenis = $('#jenis').val();
var empJarak = $('#jarak').val();

$.ajax({
type : "POST",
url  : "InputPembangunan/save",
dataType : "JSON",
data : {input_id:empInputId, jenis:empJenis, jarak:empJarak },
success: function(data){
$('#jenis').val("");
$('#jarak').val("");
$('#addEmpModal').modal('hide');
alert('Successfully called');
listEmployee();
},
error: function(jqxhr, status, exception) {
alert('Exception:', exception);
}
});
return false;
});

<form id="saveEmpForm" method="post">
<div class="modal fade" id="addEmpModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add New Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">                       
<div class="form-group row">
<label class="col-md-2 col-form-label">Jenis</label>
<div class="col-md-10">
<input type="text" name="jenis" id="jenis" class="form-control" required>
<input type="hidden" id="input_id"  name="input_id" class="form-control " value="{$input_id}">
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label">Jarak</label>
<div class="col-md-10">
<input type="text" name="jarak" id="jarak" class="form-control" required> 
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</form>

在控制器文件中保存功能

public function save(){
$data=$this->inputs_model->saveEmp();
echo json_encode($data);
}

型号中的保存功能

public function saveEmp(){
$data = array(              
'input_id'          => $this->input->post('input_id'), 
'jenis'             => $this->input->post('jenis'), 
'jarak'             => $this->input->post('jarak'), 
'created_at'        => date("Y-m-d h:i:sa"),
'updated_at'        => date("Y-m-d h:i:sa")
);
$result=$this->db->insert('input_jenis_industri',$data);
return $result;
}

代码如上所述，我保存数据的ajax函数不起作用。它没有将数据保存在数据库中。是什么原因导致了问题？

我的ajax函数调用InputPembangunan/save来保存数据，然后控制器尝试使用save((函数来保存数据。使用模型saveEmp((保存

Answer 1

以下内容不正确，提交事件中没有涉及点击

$('#saveEmpForm').submit('click',function(){

更改为

$('#saveEmpForm').submit(function(event){
event.preventDefault()// prevent normal form submit

Answer 2

在不刷新页面的情况下，您必须在提交事件后调用event.prventDefault((方法。

更换这个

$('#saveEmpForm').submit('click',function(){

带有

$('#saveEmpForm').on('submit',function(){
event.preventDefault()

Answer 3

更改此

<button type="submit" class="btn btn-primary">Save</button>

到

<button type="button" class="btn btn-primary">Save</button>

Answer 4

您可以使用onlick()方法。其实我以前是这样的；

<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" onclick="save()" class="btn btn-primary">Save</button>
</div>

添加jquery

function save() {
// ajax adding data to database
var formData = new FormData($('#form')[0]);
$.ajax({
URL: "<?php echo site_url('InputPembangunan/save')?>",
type: "POST",
data: formData,
contentType: false,
processData: false,
dataType: "JSON",
success: function(data) {
if(data.status) //if success close modal and reload ajax table
{
$('#modal_form').modal('hide');
reload_table();
} else {
//do something
}
},
error: function(jqXHR, textStatus, errorThrown) {
//do error form
}
});}

Answer 5

使用以下方式，

$( "#saveEmpForm" ).submit(function( event ) {
event.preventDefault();

/** Your Existing Code ***/
var empInputId = $('#input_id').val();
var empJenis = $('#jenis').val();
var empJarak = $('#jarak').val();
$.ajax({
type : "POST",
url  : "InputPembangunan/save",
dataType : "JSON",
data : {input_id:empInputId, jenis:empJenis, jarak:empJarak },
success: function(data){
$('#jenis').val("");
$('#jarak').val("");
$('#addEmpModal').modal('hide');
alert('Successfully called');
listEmployee();
},
error: function(jqxhr, status, exception) {
alert('Exception:', exception);
}
});
return false;
/** Your Existing Code ***/
});

此外，您还可以通过以下链接查看jQuery引用：https://api.jquery.com/submit/#submit

Answer 6

更换

$('#saveEmpForm').submit('click',function(){

带有

$(document).off('submit','#saveEmpForm').on('submit','#saveEmpForm',function(event) {
event.preventDefault(); //to prevent default submit action
...rest of the code
})

还检查浏览器开发工具上的任何错误