没有库的等效代码

Question

我使用教程来获取以下 ajax 代码。在本教程中，他们拥有库 jquery.form.js。代码如下：

function onsuccess(response,status){
    $("#onsuccessmsg").html(response);
        alert(response);
    }
    $("#uploadform").on('change',function(){
        var options={
        url     : $(this).attr("action"),
        success : onsuccess
    };
    $(this).ajaxSubmit(options);
        return false;
});

如果我不想实现jquery.form.js 怎么办。使用普通 ajax（没有库）的等效代码是什么？

更新

我尝试了以下代码：

$("#uploadform").on('change',function(){
                $.ajax({
                    url: $(this).attr("action"),
                    context: document.body,
                    success: function(){
                        $("#onsuccessmsg").html(response);
                        alert("asdf");
                    }
                });
                return false;
            });

它现在什么都不做。

Answer 1

这更像是：（抱歉格式化，我在手机上）

            $("#uploadform").on('submit',function(e){
                e. preventDefault() ;
                var formData = new FormData($(this)[0]);

                $.ajax({
                    url: $(this).attr("action"),
                    context: document.body,
                    data: formData, 
                    type: "POST",  
                    contentType: false,
                    processData: false,
                    success: function(response, status, jqxhr){
                        $("#onsuccessmsg").html(response);
                        alert("asdf");
                    }
                });
                return false;
            });

数据变量需要由您通过运行表单字段手动构建。您可能还想查看jquery post，这是编写上述内容的简写方式。

---

您可以使用这个之前回答的问题来获取您需要传递到 ajax 数据字段的表单数据：

How can I get form data with Javascript/jQuery?

另外值得注意的是，如果您从表单发布文件，您的表单必须有enctype="multipart/form-data"。 使用 ajax 提交表单时，您需要设置contentType: false, processData: false。 See this post for reference.

我已经更新了上面的代码 sn-p 以反映这一点。

如果这回答了您的问题，请将其标记为正确答案。