formulario formulario
El formulario es el principal responsable de la función de recogida de datos en la página web.
Las etiquetas en HTML se <form>utilizan para recopilar la información ingresada por el usuario y enviar la información recopilada al servidor para su procesamiento a través de la operación de envío de las etiquetas.
El formulario consta de tres partes básicas:
表单标签 form
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮 <button type="submit">提交</button>
Atributos de etiqueta
acción
El atributo de acción se utiliza para especificar dónde enviar los datos del formulario cuando se envía el formulario.
El valor del atributo de acción debe ser una dirección URL proporcionada por el backend, que es responsable de recibir los datos enviados por el formulario.
Cuando <form>no se especifica el caso de formulario en el valor del atributo de acción, la acción predeterminada es la dirección URL de la página actual.
Nota: Cuando se envía el formulario, la página saltará inmediatamente a la dirección URL especificada por el atributo de acción.
objetivo
El atributo de destino se utiliza para especificar dónde abrir la URL de la acción.
Hay 5 valores opcionales. De forma predeterminada, el valor de target es _self, lo que significa que la URL de la acción se abre en el mismo marco.
método
El atributo de método se utiliza para especificar cómo enviar los datos del formulario a la URL de la acción.
Hay dos valores opcionales, obtener y publicar.
De forma predeterminada, el valor del método es obtener, lo que significa que los datos del formulario se envían a la URL de la acción en forma de dirección URL .
Nota:
get 方式适合用来提交少量的、简单的数据。
post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。
在实际开发中，<form> 表单的 post 提交方式用的最多
很少用 get。例如登录、注册、添加数据等表单操作，都需要使用 post 方式来提交表单。
enctype
Cuando se trata de operaciones de carga de archivos, el valor de enctype debe establecerse en multipart / form-data
Si el envío del formulario no implica operaciones de carga de archivos, simplemente establezca el valor de enctype en application / x-www-form-urlencoded.
Envío sincrónico de formularios
Al hacer clic en el botón enviar, la acción de activar el envío del formulario, de modo que la página salte a la URL de la acción, se denomina envío sincrónico del formulario.
Desventajas del envío de formularios sincrónico
Una vez que el formulario se envía sincrónicamente, toda la página saltará a la dirección a la que apunta la URL de acción y la experiencia del usuario es muy mala.<form>Una vez que el formulario se envía sincrónicamente, se perderán el estado y los datos anteriores de la página .
Solución: el formulario solo es responsable de recopilar datos y Ajax es responsable de enviar los datos al servidor.
Envíe los datos del formulario a través de Ajax
En jQuery, puede usar las siguientes dos formas de monitorear el evento de envío del formulario:
//1
$('#form1').submit(function(e) {
alert('监听到了表单的提交事件')
})
//2
$('#form1').on('submit', function(e) {
alert('监听到了表单的提交事件')
})
Cuando escuche un evento de envío de formulario después de que el evento pueda llamar a la event.preventDefault()función del objeto , para evitar el envío del formulario y los saltos de página, muestre el código de la siguiente manera:
$('#form1').submit(function(e) {
// 阻止表单的提交和页面的跳转
e.preventDefault()
})
$('#form1').on('submit', function(e) {
// 阻止表单的提交和页面的跳转
e.preventDefault()
})
Obtenga rápidamente los datos en el formulario
Una forma simplificada de las operaciones de adquisición de datos, jQuery proporciona una serialize()sintaxis de función que es la siguiente:
<form id="form1">
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit">提交</button>
</form>
var data = $('#form1').serialize()
console.log(data) // // username=用户名的值&password=密码的值
Formulario de comentario de caso
estructura html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap.css" />
<script src="./lib/jquery.js"></script>
<script src="./js/cmt.js"></script>
</head>
<body style="padding: 15px;">
<!-- 评论面板 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">发表评论</h3>
</div>
<form class="panel-body" id="formAddCmt">
<div>评论人：</div>
<input type="text" class="form-control" name="username" autocomplete="off" />
<div>评论内容：</div>
<textarea class="form-control" name="content"></textarea>
<button type="submit" class="btn btn-primary">发表评论</button>
</form>
</div>
<!-- 评论列表 -->
<ul class="list-group" id="cmt-list">
<li class="list-group-item">
<span class="badge" style="background-color: #F0AD4E;">评论时间：</span>
<span class="badge" style="background-color: #5BC0DE;">评论人：</span> Item 1
</li>
</ul>
</body>
</html>
archivo js
function getCommentList() {
$.ajax({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/cmtlist',
success: function(res) {
if (res.status !== 200) return alert('获取评论列表失败！')
//定义一个存放数据的数组
var rows = []
//循环遍历得到的数据 i是索引号 item是属性值
$.each(res.data, function(i, item) {
var str = '<li class="list-group-item"><span class="badge" style="background-color: #F0AD4E;">评论时间：' + item.time + '</span><span class="badge" style="background-color: #5BC0DE;">评论人：' + item.username + '</span>' + item.content + '</li>'
rows.push(str)
})
//追加元素到ul中
$('#cmt-list').empty().append(rows.join(''))
}
})
}
getCommentList()
$(function() {
$('#formAddCmt').submit(function(e) {
//组织表单提交
e.preventDefault()
var data = $(this).serialize()
//通过ajax方式提交表单
$.post('http://www.liulongbin.top:3006/api/addcmt', data, function(res) {
if (res.status !== 201) {
return alert('发表评论失败！')
}
getCommentList()
// $('#formAddCmt')[0]jquery对象转成原生对象
//reset() 方法可把表单中的元素重置为它们的默认值。
$('#formAddCmt')[0].reset()
})
})
})