ajax表单提交怎么写?ajax表单提交方法

TheDisguiser 2020-03-24 18:51:09 java常见问答 9166

对于从事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()">&nbsp;<input type="reset" 
value="重置"></p>
    
</form>
</div>
</body>
</html>

注:这种方式提交form表单数据需要注意的是form表单中的项一定要有name属性,后台获取的键值对为key=name值,value=各项值,注意无论是input标签还是span或者是其他标签,一定要有name属性,没有name属性后台是获取不到该项的。

以上就是关于ajax提交表单的方法,更过相关内容请持续关注本站。