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

最新推荐文章于 2021-03-09 23:04:40 发布

江湖一点雨

最新推荐文章于 2021-03-09 23:04:40 发布

阅读量1.5k

点赞数

分类专栏： Web开发常见问题文章标签： form表单提交 Ajax提交表单方式常用form表单提交方式对比ajax提交json 提交示例

本文链接：https://blog.csdn.net/itbiggod/article/details/79955128

版权

Web开发常见问题专栏收录该内容

36 篇文章 8 订阅

订阅专栏

使用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属性。

江湖一点雨

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
1
评论
form表单提交之Ajax版和常用版区别和联系。

使用Ajax方法实现form表单的提交1.区别联系在使用form表单的时候,一旦点击提交触发submit事件，一般会使得页面跳转，页面间的跳转等行为的控制权往往在后端的控制层，后端会控制页面的跳转及数据传递。但是当不希望页面跳转或者是想要将控制权放在前端，让JS来控制页面的跳转或者数据变化。这个时候往往需要异步操作。也就是使用ajax方式，通过ajax方法实现form表单的提交并...
复制链接

扫一扫