目录
form标签（表单）是用来收集用户输入的信息
一个完整的表单的组成
1.表单标签： form
2.表单域: input, checkbox, select ...
3.表单按钮<button type="submit"></button>
<form>
<input type="text" name="email_or_mobile"/>
<input type="password" name="password" />
<input type="checkbox" name="remember_me" checked />
<button type="submit">登录</button>
</form>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05.案例_表单提交</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<style>
html,
body {
background-color: #f8f8f8;
}
.login-box {
width: 400px;
position: fixed;
top: 20%;
left: 50%;
transform: translateX(-50%);
border: 1px solid #efefef;
padding: 20px;
border-radius: 4px;
box-shadow: 1px 1px 5px #cfcfcf;
background-color: #fff;
transition: box-shadow 0.3s ease;
}
.login-box:hover {
transition: box-shadow 0.3s ease;
box-shadow: 1px 1px 20px #cfcfcf;
}
</style>
</head>
<body>
<div class="login-box">
<form id="myForm">
<div class="form-group">
<label for="username">Account</label>
<!-- 账号 -->
<input type="text" class="form-control" name="username" id="username" autocomplete="off">
<small id="emailHelp" class="form-text text-muted">The available account is
<strong>admin</strong></small>
</div>
<div class="form-group">
<!-- 密码 -->
<label for="password">Password</label>
<input type="password" class="form-control" name="password" id="password">
<small id="emailHelp" class="form-text text-muted">The available password is
<strong>123456</strong></small>
</div>
<button type="submit" class="btn btn-primary" id="btnLogin">Submit</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
<script src="./lib/form-serialize.js"></script>
<script>
</script>
</body>
</html>实现点击登录按钮, 调用登录接口, 返回结果用alert提示
// 目标: 用整体获取插件, 完成登录的表单提交效果
// 请求地址: http://ajax-api.itheima.net/api/login
// 请求方式: POST
// 参数: { username: 用户名, password:密码 }
// 1. 提交按钮, 点击事件
document.querySelector('#btnLogin').addEventListener('click', e => {
e.preventDefault()
// 2. 整体获取登录表单参数名和值对象
let formObj = serialize(document.querySelector('#myForm'), { hash: true })
// 3. 使用axios发送请求，之后根据响应结果，做提示
axios({
url: 'http://ajax-api.itheima.net/api/login',
method: 'POST',
data: formObj
}).then(({ data: res }) => {
alert(res.message)
}).catch(err => {
alert('登录失败');
})
})
概念:以键值对形式存放数据的容器, 常用于装载文件对象
FormData的正确使用方法:实例化一个对象，用它的append方法加入参数名和值
语法格式:
// 1. 创建一个FormData对象
let fd = new FormData()
// 2. 向对象中添加 数据
// FormData.append(属性名, 属性值)
// 示例:
fd.append('name', '小马');使用formData来实现头像上传并回显 ，掌握按钮关联隐藏文件选择器能力
先给出静态HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例_头像上传</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<style>
.thumb-box {
text-align: center;
margin-top: 50px;
}
.thumb {
width: 250px;
height: 250px;
object-fit: cover;
border-radius: 50%;
border: 5px solid black !important;
}
</style>
</head>
<body>
<div class="thumb-box">
<!-- 头像 -->
<img class="img-thumbnail thumb" src="./lib/images/cover.jpg">
<div class="mt-2">
<input type="file" id="iptFile" accept="image/*">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
<script>
</script>
</body>
</html>核心javascript代码:
let iptFile = document.querySelector('#iptFile')
let img = document.querySelector('.thumb')
// 检测文件选择器值变化
iptFile.addEventListener('change', (e) => {
// 当选择了文件, 再执行里面代码
if (e.target.files.length === 0)
return
// 因为要携带文件, 所以使用FormData实例装载
let fd = new FormData()
// avatar这个名字是接口文档约定的
fd.append('avatar', e.target.files[0])
// axios发请求
axios({
url: 'http://ajax-api.itheima.net/api/file',
method: 'post',
data: fd
}).then(({ data: res }) => {
// 6. 成功后, 服务器返回图片地址铺设到img标签回显
img.src = res.data.url
})
})完成效果图示例:
请求体分为3种常用类型和场景
请求头中的Content-Type字段，用来标记请求体内容的类型
axios自动根据data值的类型, 帮我们自动设置的
3种Content-Type
静态HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图书管理</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<style>
:root {
font-size: 15px;
}
body {
padding-top: 15px;
}
</style>
</head>
<body>
<!-- 栅格系统 -->
<div class="container">
<div class="d-flex justify-content-between align-items-center">
<h1>图书管理</h1>
<button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addModal" id="myAddBtn">添加</button>
</div>
<table class="table table-bordered table-striped table-dark table-hover text-center">
<thead>
<!-- 表头行 -->
<tr>
<th scope="col">Id</th>
<th scope="col">书名</th>
<th scope="col">作者</th>
<th scope="col">出版社</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<!-- 表格中的每一行 -->
<tr>
<th scope="row">xxx</th>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
<td>
<button type="button" class="btn btn-link btn-sm btn-delete">删除</button>
<button type="button" class="btn btn-link btn-sm btn-update">编辑</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- add Modal -->
<div class="modal fade" id="addModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">添加图书</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="addForm" class="p-3">
<!-- 书名 -->
<div class="mb-3">
<label class="form-label">书名</label>
<input type="text" name="bookname" class="form-control" placeholder="请输入图书名称"
name="bookname" />
</div>
<!-- 作者 -->
<div class="mb-3">
<label class="form-label">作者</label>
<input type="text" name="author" class="form-control" placeholder="请输入作者名字" name="author" />
</div>
<!-- 出版社 -->
<div class="mb-3">
<label class="form-label">出版社</label>
<input type="text" name="publisher" class="form-control" placeholder="请输入出版社名称"
name="publisher" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="addBtn">确认</button>
</div>
</div>
</div>
</div>
<!-- edit Modal -->
<div class="modal fade" id="editModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">编辑图书</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="editForm" class="p-3">
<input type="hidden" name="id" />
<!-- 书名 -->
<div class="mb-3">
<label class="form-label">书名</label>
<input type="text" name="bookname" class="form-control" placeholder="请输入图书名称"
name="bookname" />
</div>
<!-- 作者 -->
<div class="mb-3">
<label class="form-label">作者</label>
<input type="text" name="author" class="form-control" placeholder="请输入作者名字" name="author" />
</div>
<!-- 出版社 -->
<div class="mb-3">
<label class="form-label">出版社</label>
<input type="text" name="publisher" class="form-control" placeholder="请输入出版社名称"
name="publisher" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="editBtn">确认</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<script src="./lib/form-serialize.js"></script>
</body>
</html>核心动态javascript代码:
<script>
// 查询
function render() {
axios({
url: 'http://ajax.itheima.net/api/books/',
// url: 'http://ajax-api.itheima.net/api/books',
method: 'GET',
}).then(res => {
// console.log(res.data.data);
const arr = res.data.data
// 显示到页面
let str = arr.map(function (item) {
return `
<tr>
<th scope="row">${item.id}</th>
<td>${item.bookname}</td>
<td>${item.author}</td>
<td>${item.publisher}</td>
<td>
<button data-id="${item.id}" type="button" class="btn btn-link btn-sm btn-delete">删除</button>
<button data-id="${item.id}" type="button" class="btn btn-link btn-sm btn-update">编辑</button>
</td>
</tr>
`
}).join('')
document.querySelector('#tbody').innerHTML = str
})
}
render()
// 删除事件委托(删除图书)
document.querySelector('#tbody').addEventListener('click', function (e) {
// console.log(e.target.tagName);
if (e.target.classList.contains('btn-delete')) {
const id = e.target.dataset.id
// alert(id)
axios({
url: 'http://ajax.itheima.net/api/books/' + id,
method: 'DELETE'
}).then(res => {
console.log(res);
// 重发一下,更新页面
render()
})
}
})
// 添加图书操作
// 获取模态框表单信息
const addModal = new bootstrap.Modal(document.querySelector('#addModal'))
const addForm = document.querySelector('#addForm')
// 获取模态框确认按钮
const addBtn = document.querySelector('#addBtn')
addBtn.addEventListener('click', function () {
// 收集用户输入的json对象
let data = serialize(addForm, { hash: true })
axios({
url: 'http://ajax.itheima.net/api/books/',
method: 'POST',
data: data
}).then(({ data: res }) => {
console.log(res.data.data);
// // 6. 重新请求并铺设覆盖, 并让表单清空, 模态框消失
addForm.reset() // 触发form的原生事件方法让它重置
// 调用hide()方法隐藏
addModal.hide() // 触发BS内置方法, 让BS的模块框消失
render()
})
})
// 修改图书
const editModal = new bootstrap.Modal(document.querySelector('#editModal'))
const editForm = document.querySelector('#editForm')
// 通过tbody事件委托给带有btn-update类名的按钮注册点击事件
document.querySelector('tbody').addEventListener('click', function (e) {
// 当鼠标点击到包含有btn-update类名的时候,返回结果
if (e.target.classList.contains('btn-update')) {
const id = e.target.dataset.id
editModal.show()
axios({
url: 'http://ajax.itheima.net/api/books/' + id,
method: 'GET',
}).then(res => {
// console.log(res.data.data);
const newRes = res.data.data
for (let key in newRes) {
// console.log(key);
// console.log(newRes[key]);
editForm.querySelector(`[name=${key}]`).value = newRes[key]
}
})
}
})
// 修改数据保存
document.querySelector('#editBtn').addEventListener('click', function () {
let edit = serialize(editForm, { hash: true })
console.log(edit);
axios({
url: `http://ajax.itheima.net/api/books/${edit.id}`,
method: 'PUT',
data: edit
}).then(res => {
console.log(res);
render()
editModal.hide()
})
})
</script>
设置axios基地址配置，优化axios的写法
每次请求地址, 接口文档只有后半段, 原因是所有前面的基础地址相同 。所以axios提供了一个全局的属性defaults.baseURL, 在每次axios函数发请求时, 具体请求的地址为"baseURL值+url值" 。
语法: axios.defaults.baseURL = '前缀基础地址' (简称基地址)
直接对axios本身进行设置
// 目标: axios可以提前设置一个基地址
// 知识点: 函数也是对象
// 前缀地址(基地址)
axios.defaults.baseURL = 'http://ajax-api.itheima.net'axios请求时, method选项, 内部默认用"GET"方式, 所以也可以省略不写
还有一些请求方式的方法可以直接使用例如语法为:
// 下面两种写法是等价的
axios({
url: 'xx',
method: 'POST',
data: {
a: 1
}
})
axios.post('xx', {a:1} )
// 下面两种方式是等价的
axios({
url: 'xx',
method: 'get',
params: {
a: 1
}
})
axios.get('xx', {params: {a:1} } ) 
屏幕前的你的投票与我而言是宝贵的建议,我会吸收并之后优化文章,感谢你的反馈
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser
rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送
文章目录git常用命令（简介，详细参数往下看）Git提交代码步骤gitpullgitstatusgitaddgitcommitgitpushgit代码冲突合并问题方法一：放弃本地代码方法二：合并代码常用命令以及详细参数gitadd将文件添加到仓库：gitdiff比较文件异同gitlog查看历史记录gitreset代码回滚版本库相关操作远程仓库相关操作分支相关操作创建分支查看分支：gitbranch合并分支：gitmerge删除分支：gitbranch-ddev查看分支合并图：gitlog–graph–pretty=oneline–abbrev-commit撤消某次提交git用户名密码相关配置g
我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我在ruby表单中有一个提交按钮f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id"我想在不使用任何javascript的情况下通过ruby禁用此按钮 最佳答案 添加disabled:true选项。f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id",disabled:true 关于ruby-on-rails-如何在Rails中添加禁用的提交按钮，我们在St
保存成功后可以回滚吗？让我有一个带有属性名称、电子邮件等的用户模型。例如u=User.newu.name="test_name"u.email="test@email.com"u.save现在记录将成功保存在数据库中，之后我想回滚我的事务(不是销毁或删除)。有什么想法吗？ 最佳答案 您可以通过交易来做到这一点，请参阅http://markdaggett.com/blog/2011/12/01/transactions-in-rails/例子:User.transactiondoUser.create(:username=>'Nemu
我在事件管理员编辑页面中有嵌套资源，但我只想允许管理员编辑现有资源的内容，而不是添加新的嵌套资源。我的代码看起来像这样:formdo|f|f.inputsdof.input:authorf.input:contentf.has_many:commentsdo|comment_form|comment_form.input:contentcomment_form.input:_destroy,as::boolean,required:false,label:'Remove'endendf.actionsend但它在输入下添加了“添加新评论”按钮。我怎样才能禁用它，并只为主窗体保留f.ac
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan