Form表单的几种提交方式

最新推荐文章于 2022-03-25 20:01:57 发布

沈君

最新推荐文章于 2022-03-25 20:01:57 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq1131410679/article/details/75386522

本文详细介绍了四种不同的表单提交方式：普通提交、JavaScript提交、jQuery提交及Ajax和jQuery结合的提交方式，并提供了具体的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ 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=ISO-8859-1">
<title>demo</title>

<!-- 导入jQuery包 -->
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>


    <!-- 1、表单普通提交

    form的action属性是必须指定，规定当提交表单时，向何处发送表单数据。
    提交按钮，type类型必须为submit。
     -->
    <form action="Test">
        <input name="username" type="text" />
        <input type="submit" value="提交"/>
    </form>


    <!-- 2、JavaScript提交

    form的action属性是需要指定，或者通过JavaScript代码指定
    提交按钮，type类型为button，不然会作为普通提交。

    给button元素，注册一个onclick事件，点击时触发JavaScript提交。
     -->
    <form id="form2" action="Test">
        <input name="username" type="text" />
        <button type="button" onclick="click2()">提交</button>
    </form>


    <!-- 3、jQuery提交

    form的action属性是需要指定
    提交按钮，type类型为button，不然会作为普通提交。
     -->
    <form id="form3" action="Test">
        <input name="username" type="text" />
        <button id="b3" type="button">提交</button>
    </form>

    <!-- 4、ajax和jquery提交

    提交按钮，type类型为button，不然会作为普通提交。
     -->
    <form id="form4">
        <input name="username" type="text" />
        <button id="b4" type="button">提交</button>
    </form>

</body>
<script>
    //2、JavaScript提交
    function click2(){
        //通过JavaScript代码指定form的action的属性
        //document.getElementById("form2").action="Test";

        //获取form2表单js对象，调用submit方法行进提交
        document.getElementById("form2").submit();
    };


    //3、jQuery提价
    //获取button的jquery对象，给button注册一个点击事件（JavaScript点击事件为onclick，而jQuery为click）
    $("#b3").click(function(){
        //获取form3的jQuery对象，调用submit方法，进行提交
        $("#form3").submit();
    });


    //4、ajax和jquery提交
    //获取button的jquery对象，给button注册一个点击事件
    $("#b4").click(function(){
        $.ajax({
            //设置提交方式
            type:"POST",
            //设置提交url，等价于设置action属性
            url:"Test",
            //将表单序列化为字符串
            data:$("#form4").serialize() 
         });

    });

</script>

</html>