Ajax请求与表单提交的区别

最新推荐文章于 2025-07-05 12:46:28 发布

little_little0_0

最新推荐文章于 2025-07-05 12:46:28 发布

阅读量4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/little_little0_0/article/details/79887873

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了HTML表单提交的基本原理及实现方式，包括GET与POST两种提交方法的区别。同时，详细阐述了Ajax请求的工作流程及其如何实现局部页面刷新，避免整个页面的重新加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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("键名")来获取数据。