jQuery AJAX事件preventDefault()无法处理表单提交

Question

我正试图在PHP Codeigniter中使用jQuery Ajax提交一个表单。但它似乎不起作用。我做错了什么。。。

这是HTML标记。

<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
<!-- other form inputs ommitted -->
<div class="col-md-3">
<div class="box box-danger box-solid">
<div class="box-header"> <label>User Photo </label> </div>
<div class="box-body box-profile">
<center>
<img id="user_photo_change" class="img-responsive" src="//placehold.it/400x400" alt="Profile Picture" style="max-width: 120px;">
<br>
<input type="file" name="photo" onchange="readPicture(this);">
</center>
</div>
</div>
</div>
<div class="col-md-12">
<center>
<button type="reset" class="btn btn-sm bg-red">Reset</button>
<button type="submit" id="submit" class="btn btn-sm bg-green">Save</button>
</center>
</div>
</form>

这是Ajax调用

<script>
$(function() {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '<?php echo base_url('admin/save'); ?>',
data: $('form').serialize(),
success: function (data) {
$('#message').html(data);
}
});
});
});
</script>

Answer 1

您可以将提交按钮更改为普通按钮。听它咔嗒一声。希望能帮助你。

Answer 2

尝试：

$('body').on('submit','form',function(e) {
e.preventDefault();
$.ajax({ type: 'post',
url: '',
data: $('form').serialize(),
success: function (data) {
$('#message').html(data); 
alert(data);
}
});
});