ajax提交表单,juqery、原生态、h5

ajax提交表单,juqery、原生态、h5

在我们的日常开发中,经常都会用到Ajax来提交表单。让我们来看一个典型的例子:

    <form id="myform" action="webservice.php" method="post">
        <input type="email" name="email" />
        <select name="job">
            <option value="">角色</option>
            <option>web开发者</option>
            <option>IT工程师</option>
            <option>其他</option>
        </select>
        <input type="checkbox" name="freelancer" /> 你是自由职业吗?
        <input type="radio" name="experience" value="4" /> 不到5年经验
        <input type="radio" name="experience" value="5" /> 5年及以上经验
        <textarea name="comments" rows="3" cols="60"></textarea>
        <button type="submit">Submit</button>
    <form>
1.jquery ajax提交表单代码:

$("myform").on("submit", function(e) {
    e.preventDefault();
    $.post(this.action, $(this).serialize());
});

 2 .原生态javascript提交表单:

document.getElementById("myform").onsubmit = function(e) {

    e.preventDefault();

    var f = e.target,
        formData = '',
        xhr = new XMLHttpRequest();

    // fetch form values
    for (var i = 0, d, v; i < f.elements.length; i++) {
        d = f.elements[i];
        if (d.name && d.value) {
            v = (d.type == "checkbox" || d.type == "radio" ? (d.checked ? d.value : '') : d.value);
            if (v) formData += d.name + "=" + escape(v) + "&";
        }
    }

    xhr.open("POST", f.action);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
    xhr.send(formData);

}

 3. h5 ajax提交表单:

现代Web应用中频繁使用的一项功能就是表单数据 的序列化,XMLHttpRequest 2级为此定义了FormData类型。FormData为序列化表单以及创建与表单格式相同的数据(用于通过XHR传输)提供了便利。下面的我们看看,通 过FormData对象,如何提交这个表单:

document.getElementById("myform").onsubmit = function(e) {

    e.preventDefault();

    var f = e.target,
        formData = new FormData(f),
        xhr = new XMLHttpRequest();

    xhr.open("POST", f.action);
    xhr.send(formData);
}

 

看看,是不是简单多了。同时,这也比jQuery更快、更容易阅读。

使用FormData的方便之处体现在不必明确地在XHR对象上设置请求头部。XHR对象能够识别传入的数据类型是FormData的实例,并配置适当的头部信息。

如果没有表单元素传递给构造函数,下面的代码创建了一个FormData对象,并向其中添加了一些数据。这个append()方法接收两个参数:键和值,分别对应表单字段的名字和字段中包含的值。可以像这样添加任意多个键值对儿。

var formData = new FormData();
formData.append("name", "value");
formData.append("a", 1);
formData.append("b", 2);

 

支持FormData的浏览器有Firefox 4+、Safari 5+、Chrome和Android 3+版WebKit。

本文固定链接: http://www.webzhishi.com/ajax%e6%8f%90%e4%ba%a4%e8%a1%a8%e5%8d%95%ef%bc%8cjuqery%e3%80%81%e5%8e%9f%e7%94%9f%e6%80%81%e3%80%81h5/ | web知识网

ajax提交表单,juqery、原生态、h5:等您坐沙发呢!

发表评论

快捷键:Ctrl+Enter