我正在使用summernote html文本編輯器及其插入圖像功能。 (當用戶輸入的圖像,我把它發送到我的後端和與我替換用戶的圖像網址)JQuery序列化數據獲取舊窗體值
例子:
用戶輸入:http://example.com/image.jpg - >上傳此圖片亞馬遜S3 - >更新summernote文本區域的img src =「」(mydomain.com/blabla.jpg)。
以上邏輯運行良好。這裏沒有問題。
然後我想把這個texarea發送到我的後端php腳本的數據庫的東西。
但是,當我serilize並提交表格。 Ajax發送用戶的圖片網址。沒有替換圖片網址。
圖片上傳
/*GET USER'S IMAGE URL AND SEND IT TO BACKEND. UPLOAD IT, THEN RAPLACE IT'*/
/*THIS PART IS WORKING CORRECTLY */
$('button[data-original-title="Picture"]').click(function(){
// Set handler on Inset Image button when dialog window is opened
$('.modal-dialog .note-image-btn').on('click', function(e) {
var imageUrl = $('.modal-dialog .note-image-url').val();
var currentTitle = $("#title").val().trim();
if(currentTitle.length == 0){
currentTitle = "";
}
$.ajax({
url: "upload.php",
data: "url="+encodeURIComponent(imageUrl)+"&title="+encodeURIComponent(currentTitle),
type: "POST",
dataType: 'json',
success: function(data) {
if (typeof data[0] === 'string') {
$('img[src="' + imageUrl + '"]').attr('src', data);
} else {
// What to do if image downloading failed
window.alert('oops');
}
},
error: function() {
/* console.log("error");*/
}
});
});
});
形式AJAX(問題是在這裏我想)
/* SEND SERIALIZED FORM DATA TO BACKEND */
/* PROBLEM IS HERE. $("#form").serialize() CAN'T GET replaced IMAGE URL. */
$("#submitButton").on("click",function() {
$.ajax({
url: "save-article.php",
data: $("#form").serialize(),
type: "POST",
success: function(data) {
if(data === "success"){
$(".messageBox").html('<div class="alert alert-success ic">Thanks, you are redirecting</div>');
}else if(data === "fail"){
$(".messageBox").html('<div class="alert alert-danger ic">There was an error</div>');
}
},
error: function (e) {
console.log(e);
}
});*/
});
我怎樣才能改變summernote文本區域的價值提交和序列化?
HTML的外觀如何?你有沒有嘗試用新值替換textarea的值?或者使用隱藏的表單域來存儲新值? – xadhix
Html部分看起來不錯。我可以在HTML文本編輯器上看到替換的圖像。這是正確的,img src =「」包含我的域的值。但是當我序列化並提交包含summernote textarea的表單時,在我的後端,我看不到被替換的src值。 @xadhix – hakiko
_Html部分看起來不錯_如果我們應該聽取您的意見,可能需要一段時間纔能有人對此問題進行猜測。 – RiggsFolly