柒晓白的博客

事非干己休多管,话不投机莫强言。——冯梦龙《醒世恒言》

form表单提交之Ajax版和常用版区别和联系。

使用Ajax方法实现form表单的提交

1.区别 联系

在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端的控制层,后端会控制页面的跳转及数据传递。

但是当不希望页面跳转或者是想要将控制权放在前端,让JS来控制页面的跳转或者数据变化。这个时候往往需要异步操作。
也就是使用ajax方式,通过ajax方法实现form表单的提交并进行后续的异步操作。


2.提交方式示例

1.常见的form表单提交方式
代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>常见form提交方式</title>
<meta http-equiv="description" content="常见form提交方式">
</head>
<body>
    <div id="form-div">
        <form id="form1" action="/users/login" 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="submit" value="登录">&nbsp<input type="reset"
                    value="重置">
            </p>
        </form>
    </div>
</body>
</html>

使用form表单的action和 method来决定提交到的地方和提交的方式。这也是常用的提交方式。
当点击登录按钮后,即触发form表单的提交事件,数据传输至后端,然后由后端来控制页面跳转到哪里和数据怎么传递。
这样的话,第一更新以后你需要刷新页面,第二控制权在后台,不便于追踪。


2.ajax实现form提交方式

说一下修改的地方:

A. 将form元素的属性action和method去掉,必须添加id=”xxxx”,form元素就变为< form id=”xxxx”>

B. 将提交按钮的button的type=”submit” 改为 type=”button”,设置一个 id名称。

C. 在js文件中写入如下通用代码:

 $("#按键的id").click(function () {
    $.ajax({  
            type: "POST",      //提交的方法
            url:"/user/login", //提交的地址  
            data:$('#xxx').serialize(), //序列化表单值输出 
            async: false,  
            error: function(request) {  //失败的话
                 alert("提交失败 error");  
            },  
            success: function(data) {  //成功
                 alert(data);  //就将返回的数据显示出来
                 window.location.href="跳转页面"  
            }  
         });
       });  

具体示例:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表单提交Ajax的使用</title>
<meta http-equiv="description" content="ajax方式">
<!-- 需要引入Jquery任意版本 -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- 表单提交Ajax的使用 -->
<script type="text/javascript">
    function login() {
        $.ajax({
            //注意一下这几个参数 
            type : "POST",              //方法类型
            dataType : "JSON",          //预期服务器返回的数据类型JSON 
            url : "/user/login",        //提交到的 url
            data : $('#form1').serialize(), //序列化输出字符串类型的结果

            success : function(result) {
                console.log(result);    //打印服务端返回的数据(调试用)
                if (result.resultCode == 200) { //200状态码 = 成功
                    alert("请求成功 success!");
                }
                ;
            },
            error : function() {
                alert("请求失败,error!");
            }
        });
    }
</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()">
            </p>
        </form>
    </div>
</body>
</html>

3.总结和提醒

在常用方式中,点击的登录按钮的type为”submit”类型;form的action不为空;

在Ajax方式中需要注意的是$.ajax方法中的参数:dataType和data属性的设置。必须添加id属性。


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载,追究法律责任。 https://blog.csdn.net/ITBigGod/article/details/79955128
个人分类: java web 开发
想对作者说点什么? 我来说一句

数据结构(C版)

-

学院

1970年01月01日 08:00

没有更多推荐了,返回首页

不良信息举报

form表单提交之Ajax版和常用版区别和联系。

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭