对于从事Javaweb开发的小伙伴们来说，ajax一定不陌生，很多项目都需要ajax提交数据，接下来的这篇文章就来给大家来介绍关于ajax提交form表单数据方法，有需要的伙伴可以参考一下。
话不多说，我们直接来看正文~
ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
ajax提交form表单数据可以分为两种，一种是无返回结果的，就是将表单数据提交给后台，后台处理完就完了;另一种就是有返回结果的，后台执行成功或失败的信息需要返回到前台。
ajax本身属于有返回结果的一类，其中的success方法就是处理后台返回结果的。
ajax提交form表单数据有返回结果的实现方式：将form表单数据序列化
例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>login
test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<meta http-equiv="pragma"
content="no-cache">
<meta http-equiv="cache-control"
content="no-cache">
<meta http-equiv="expires"
content="0">
<meta http-equiv="keywords"
content="keyword1,keyword2,keyword3">
<meta
http-equiv="description" content="ajax方式">
<script src="
http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script
>
<script type="text/javascript">
function login()
{
$.ajax({
//几个参数需要注意一下
type:
"POST",//方法类型
dataType:
"json",//预期服务器返回的数据类型
url: "/users/login"
,//url
data: $('#form1').serialize(),
success: function (result) {
console.log(result);//打印服务端返回的数据(调试用)
if
(result.resultCode == 200) {
alert("SUCCESS");
}
;
},
error : function()
{
alert("异常！");
}
});
}
</script>
</head>
<body>
<div
id="form-div">
<form id="form1" onsubmit="return false" action="##"
method="post">
<p>用户名：<input name="userName" type="text"
id="txtUserName" tabindex="1" size="15" value=""/></p>
<p>密 码：<input name="password" type="password" id="TextBox2"
tabindex="2" size="16" value=""/></p>
<p><input
type="button" value="登录" onclick="login()"> <input type="reset"
value="重置"></p>
</form>
</div>
</body>
</html>注：这种方式提交form表单数据需要注意的是form表单中的项一定要有name属性，后台获取的键值对为key=name值，value=各项值，注意无论是input标签还是span或者是其他标签，一定要有name属性，没有name属性后台是获取不到该项的。
以上就是关于ajax提交表单的方法，更过相关内容请持续关注本站。