javascript - 没有库的等效代码

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 .

我已经更新了上面的代码片段以反射(reflect)这一点。

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