Form表单的几种提交方式

来源：互联网发布：软件实施工程师前景编辑：程序博客网时间：2024/05/20 22:02

<%@ 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>

要注意的是，按enter键，会进行表单的普通提交。因此在用其他提交方式的时候，可以设置表单属性onsubmit=“return false”。特别是在用ajax提交方式的时候，表单的普通提交是会刷新页面的，而ajax则不会刷新页面。

阅读全文

0 0