Java高级 表单form提交中action和ajax使用区别

前几天看见很多身边的人在学习ajax的时候出现了一个问题,就是不知道什么时候用action+submit提交数据,什么时候用ajax;还有人有疑问表示,不知道使用Ajax时是否需要使用到form表单的action属性。下面我用一个简单的登录案例为大家介绍一下action和ajax的具体区别是什么。

1. action

<form id="login" action="/user/login" method="post">
    <input name="username" type="text" id="username"/>
    <input name="password" type="password" id="password"/>
    <input type="submit" value="登录"> 
    <input type="reset" value="重置">
</form>

注意

  • 使用action,input组合提交需要有“name”这个属性,值与实体类对应,然后传至后台。
  • 点击提交通过action中的路径/user/login找到对应的控制器,数据传至后台,由后端控制界面跳转。
  • action用于整个界面跳转,数据传到后端可以通过控制器跳转到不同的页面,比如上面的代码:登录界面为一个单独的界面,当用户输入信息通过后端代码进行验证时,数据比对成功跳转到成功页面,否则跳转失败页面。
  • form表单默认采用get方式请求,可以通过method属性来设置请求方法。
  • action提交还可以通过js拼接字符串的方式携带参数,如:
<body>
  <form id="login" action="/user/login" method="post">
    <input name="username" type="text" id="username"/>
    <input name="password" type="password" id="password"/>
    <input type="submit" value="登录" onClick="test()" > 
    <input type="reset" value="重置">
  </form>
</body>
<script>
    function test(){
        var f = document.getElementsByTagName("form")[0];
        f.action=f.action+"username="+document.getElementById("username").value;
        alert(f.action);
    }
</script>

2. ajax

<body>
  <form id="Userlogin" action="/user/login" method="post">
     <input name="userName" type="text" id="UserName"/>
     <input name="password" type="password" id="password"/>
     <input type="button" value="登录" onClick="login()"> 
     <input type="reset"value="重置">
  </form>
</body>
<script type="text/javascript">
        function login() {
            $.ajax({
                type: "POST",//方法类型
                dataType: "json",//服务器返回的数据类型
                url: "/user/login" ,//控制器url
                data: $('#login').serialize(),
                success: function (result) {
                    console.log(result);//测试是否有数据
                    if (result.resultCode == 200) {//200正确
                        alert("成功登陆!");
                       window.location.href = '跳转路径';//成功后跳转到某界面
                    }
                    else{
                      alert(result.msg);
                    }
                },
                error : function() {
                    alert("登录失败!");
                }
            });
       }
</script>

注意:

  • 在提交按钮上写上事件来触发ajax
  • input标签的type属性不能时submit,需要改成button,这样才能实现局部刷新,而不是页面跳转
  • action属性必须有,但是值可以为空,为空表示由本页面处理数据
上一篇:Git新建本地、远程分支并推送。


下一篇:nginx增加自定义账号鉴权