JQuery序列化數據獲取舊表單值

Question

我正在使用summernote html文本編輯器及其“插入圖像”功能。 （當用戶輸入圖像時，我會將其發送到后端，並用我的用戶的img網址替換）

例：

用戶輸入： http : //example.com/image.jpg- >將此圖像上傳到Amazon S3->更新summernote文本區域的img src =“”（mydomain.com/blabla.jpg）。

以上邏輯運作良好。 這里沒有問題。

然后，我想將此texarea發送到我的后端php腳本以獲取數據庫資料。

但是當我整理並提交表格時。 Ajax發送用戶的圖像URL。 未替換的圖片網址。

圖片上傳

/*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文本區域的值並進行序列化？

Answer 1

Summernote不會使用您在其上初始化編輯器的元素，而是將該元素內的數據復制到其自己動態創建的界面中。 您需要從Summernotes編輯區域復制數據（可以使用類目標.note-editable ）。 如果您還沒有，我敦促您查看Summernote主站點，以獲取以編程方式獲取代碼的示例。 https://summernote.org/getting-started/#get--設置代碼