【问题标题】：JQuery Serialized Data Getting Old Form ValuejQuery序列化数据获取旧表单值
【发布时间】：2018-06-08 05:46:47
【问题描述】：

我正在使用summernote html 文本编辑器及其插入图像功能。（当用户输入图像时，我会将其发送到我的后端并用我的替换用户的 img url）

例子：

用户输入：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文本区域的值并对其进行序列化？

【问题讨论】：

HTML 是什么样的？您是否尝试过用新值替换 textarea 的值？还是使用隐藏的表单字段来存储新值？
Html 部分看起来不错。我可以在 HTML 文本编辑器上看到替换的图像。这是正确的，并且 img src="" 包含我的域的值。但是当我序列化并提交包含summernote textarea的表单时，在我的后端，我看不到替换的src值。 @xadhix
Html 部分看起来不错如果我们应该相信你的话，可能需要一段时间才能有人费心猜测这个问题。
@hakiko 请尝试制作一个 jsfiddle。会让每个人都更容易:)

标签： javascript php jquery ajax summernote

【解决方案1】：

Summernote 不使用您初始化编辑器的元素，它将该元素中的数据复制到它自己的动态创建的界面中。您需要从 Summernotes 编辑区复制数据（您可以使用类目标.note-editable）。如果您还没有，我强烈建议您查看 Summernote 主站点以获取以编程方式获取代码的示例。 https://summernote.org/getting-started/#get--set-code

【讨论】：