「ajax提交form表单」Ajax请求与表单提交的区别

ajax提交form表单

form表单提交

<form action="ajaxTest.json" method="post">
    <input type="text" name="username">
    <input type="password" name="password">
</form>

action指明要提交到的url,method为提交方法，为post或是get。如果方法为get，表单提交的数据会被写在请求头的URL里（请求头里没有content-type字段）；如果方法为post，数据会被保存在请求体里，请求头的Content-type字段的值是APPlication/x-www-form-urlencoded。表单每次提交都会导致页面刷新。点击会提交表单内容的，有三个标签：

<input type="submit"/>

<button type="submit"></button>

<input type="image">

Ajax请求

<html>
<head></head>
<body>
<script>
function createXHR() {
    if(typeof XMLHttprequest != 'undefined') {
        return new XMLHttpRequest();
    } else if(typeof ActiveXObject != 'undefined') {
        if(typeof arguments.callee.activeXString != "string") {
            var versions = ["msxml2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
                i, len;

            for(i = 0, len = versions.length; i < len; i++) {
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                } catch (ex) {
                    //跳过
                }
            }

            return new ActiveXObject(arguments.callee.activeXString);
        }
    } else {
        throw new ERROR("No XHR object available.");
    }
}

var xhr = createXHR();
var data = "username=Mary&password=123";
xhr.open("GET", "ajaxTest.json", true);
xhr.setRequestHeader("Content-type", "application/x-www.form-urlencoded");
xhr.send(data);
</script>
</body>
</html>

Ajax请求不会导致整个页面刷新，只会使局部刷新。使用Ajax必需要注意：数据必须是用&连接的键值对，并且在open()和send()之间必须要加xhr.setRequestHeader("Content-type", "application/x-www.form-urlencoded");这样才能确保后台可以通过request.getparameter("键名")来获取数据。

文章最后发布于: 2018-04-10 21:02:30

Ajax请求与表单提交的区别