如果使用此js 通知庫提交成功，我想顯示成功通知，但它不起作用。
如果我將new Notify({ ... })功能更改為簡單功能，alert("success");則會顯示警報...
但是，如果我在瀏覽器的控制臺中插入相同的 js 代碼，那么它會顯示通知...
<form action="" method="post">
<div class="form-group">
<label for="title"><h6>Title</h6></label>
<input type="text" class="form-control" name="title" id="title">
</div>
<div class="form-group">
<label for="content"><h6>Content</h6></label>
<textarea class="form-control" id="content" name="content"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" id="edit">Save</button>
</div>
</form>
<script>
$("#edit").click(function() {
var title = $("#title").val();
var content = $("#content").val();
$.ajax({
type: "POST",
url: "edit.php",
data: {
title: title,
content: content
},
cache: false,
success: function(data) {
new Notify({
status: 'success',
title: 'Test',
text: 'Success',
effect: 'fade',
speed: 300,
customClass: null,
customIcon: null,
showIcon: true,
showCloseButton: true,
autoclose: false,
autotimeout: 3000,
gap: 20,
distance: 20,
type: 1,
position: 'right top'
})
},
error: function(xhr, status, error) {
console.error(xhr);
}
});
});
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/simple-notify.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/simple-notify.min.js"></script>
uj5u.com熱心網友回復：
您在問題下的評論中的這一陳述澄清了這個問題：
我想發送表單的資料然后頁面只是立即重新加載并且通知沒有顯示
問題是因為您沒有呼叫preventDefault()引發的事件。因此表單仍然通過標準方式提交，并發生頁面重定向。當您使用 AJAX 時，您需要防止這種行為。
另請注意，將事件處理程式掛鉤到元素的submit事件而不是提交的事件稍微更語意化。試試這個：formclickbutton
$("form").on('submit', e => {
e.preventDefault(); // stop form submission
$.ajax({
type: "POST",
url: "edit.php",
data: {
title: $("#title").val(),
content: $("#content").val()
},
cache: false,
success: function(data) {
new Notify({
status: 'success',
title: 'Test',
text: 'Success',
effect: 'fade',
speed: 300,
customClass: null,
customIcon: null,
showIcon: true,
showCloseButton: true,
autoclose: false,
autotimeout: 3000,
gap: 20,
distance: 20,
type: 1,
position: 'right top'
})
},
error: function(xhr, status, error) {
console.error(xhr);
}
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/478661.html
標籤：javascript php jQuery
上一篇：陣列切片不回傳剩余項