html 表单一定要用submit提交吗

不一定需要用submit提交

1. HTML提交表单

HTML提交表单简单易 *** 作，依靠在<form>标签对中的<input type='submit'>提交按钮进行请求发送和参数提交。其中form标签的post属性决定提交方式是get还是post。

servlet或者action根据name属性获取提交的参数

2. HTML超链接请求

只使用html发送超链接请求的话，方式比较单一。传递参数值是被写死的，并且只能使用get方式去发送请求。如果不用javascript的话，超链接还是作为一个页面跳转按钮比较合适。

jsp代码

3. Javascript提交表单

使用js和html提交表单的话就可以灵活很多，因为js不仅有针对页面很多的触发事件，而且可以获取到html页面元素的信息。

3.1 form表单提交前触发事件

这里主要是介绍下在提交form表单之前的onsubmit事件,在很早以前学习的时候，这个事件会被作为用户输入数据校验的入口。不过仍然因为js使html页面的灵活性变高，这种前端校验用户输入的方式也不是那么唯一。

jsp代码

javascript代码

ajax({

url: "", //请求地址

type: "POST", //请求方式

data: { name: "super", age: 20 },//请求参数

dataType: "json",

success: function (response, xml) {

// 此处放成功后执行的代码

},

fail: function (status) {

// 此处放失败后执行的代码

}

})

function ajax(options) {

options = options || {}

options.type = (options.type || "GET").toUpperCase()

options.dataType = options.dataType || "json"

var params = formatParams(options.data)

if (window.XMLHttpRequest) {

var xhr = new XMLHttpRequest()

} else {

var xhr = new ActiveXObject('Microsoft.XMLHTTP')

}

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

var status = xhr.status

if (status >= 200 &&status <300) {

options.success &&options.success(xhr.responseText, xhr.responseXML)

} else {

options.fail &&options.fail(status)

}

}

}

if (options.type == "GET") {

xhr.open("GET", options.url + "?" + params, true)

xhr.send(null)

} else if (options.type == "POST") {

xhr.open("POST", options.url, true)

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

xhr.send(params)

}

}

function formatParams(data) {

var arr = []

for (var name in data) {

arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]))

}

arr.push(("v=" + Math.random()).replace("."))

return arr.join("&")

}

可以

<form id="form" method="post">

    <input type="text" name="id" />

    <button id="btn1" onclick="submit1()">提交1</button>

    <button id="btn1" onclick="submit2()">提交2</button>

</form>

<script>

//方法一

function submit1(){

    document.getElementById("form").action = "test1.html"

    document.getElementById("form").submit()

}

function submit2(){

    document.getElementById("form").action = "test2.html"

    document.getElementById("form").submit()

}

//方法二  基于JQuery

$("#btn1").click(function(){

    $("#form").attr("action","test1.html")

    $("#form").submit()

})

$("#btn2").click(function(){

    $("#form").attr("action","test2.html")

    $("#form").submit()

})

</script>

---