本文详细介绍了JavaScript中触发事件的两种方式，包括原生JS的事件绑定和jQuery的选择器事件绑定。此外，还讲解了DOM加载后的数据预加载、操作表单数据的方法，以及如何监听键盘事件。在数据操作部分，阐述了.val()和.html()方法的使用场景。最后，讨论了表单的异步提交技巧，包括使用iframe和formData对象进行后台提交。
js触发事件的方式
方式一
使用原生js 通过标签绑定事件 声明方法的方式来触发 这里的方法名和声明的名称要一致，并且声明的名称一定是名称+括号的形式 如 onclick=“test1()”
<body>
<div>
<button onclick="test1()"> 点我</button>
</div>
<script>
function test1(){
alert('点击一下')
}
</script>
</body>
方式二
引入jquary 为标签设置id 通过id选择器为id指定action来触发
jquary的一般形式就是 $(selector).action（function(){ }）
selector可以是id选择器 例如“#id”
也可以是类选择器 例如".class"
还有标签选择器 例如"#id 标签[标签中的元素='元素的值']"
<body>
<div>
<button id="btn" >click</button>
</div>
<script src="static/js/jquery.js"></script>
<script>
$("#btn").click(function (){
alert('点击两下')
})
</script>
</body>
js数据的预加载
Dom元素加载完成后 可以定义 ready（）方法默认执行
声明方式：
方法一：
$(document).ready(function(){
// 在这里写你的代码...
});
方法二：
$(function($) {
// 你可以在这里继续使用$作为别名... $符号可以省略
});
js操作表单数据
通过对form表单的属性设置id、name、type等标记 在js代码中进行获取
HTML 代码
<div id="app">
<!--如果设置了form标签 是看不见console打印的 因为一旦出发click事件 就会直接提交
为了方便调试 可以去除from标签 使用异步交互的方式通信
-->
<form action="">
用户名: <input type="text" name="username" >
密码: <input type="password" name="password" >
<input type="submit" value="登录" id="login">
</form>
</div>
js代码
$("#login").click(function (){
// 通过$('input[name=username]').val() 定位input输入框 然后找到name/type 来获取表单中元素的值
// 如果表单元素 设置了id的值 可以直接通过 $('#id值').val() 来获取
let username=$("#app input[name=username]").val()
let password=$('#app input[type=password]').val()
let Iusername=$('#username').val()
console.log("name定位取值=》"+username)
console.log("type定位取值=》"+password)
console.log("ID定位取值=》"+Iusername)
})
输出结果
键盘事件监听
如果不使用form标签 就无法直接使用回车键 进行表单提交，但是如果用了form标签 就不能很好的进行打印调试 所以可以在不使用form标签的情况下 使用键盘事件监听 达到同样的效果
function info(){
let username=$("#app input[name=username1]").val()
let password=$('#app input[type=password]').val()
let Iusername=$('#username1').val()
if (password==null || password.length<6){
alert("密码不能为空 或小于6位")
}
console.log("name定位=》"+username)
console.log("type定位=》"+password)
console.log("ID定位=》"+Iusername)
}
将上面的打印输出 封装成一个方法 然后在设置键盘事件 调用
$(window).keydown(function(event){
//不同的键位 对应不同的键盘码 具体的查询 这里的13指的是 enter 回车键
if (event.keyCode===13){
info()
}
});
.val()和.html（）
使用.val()方法可以将页面元素的值通过id选择器赋值给js定义的变量，从而进行异步请求和逻辑判断
同时可以在方法中放入js定义的变量 这样的作用是 将变量的值赋值给html页面的元素
将页面元素赋值给js定义的变量
$("#login").click(function (){
let username=$("#username").val()
let password=$("#password").val()
console.log(username)
console.log(password)
})
在方法中放入变量 将变量的值赋值给html的元素
$(function (){
let username="username";
$("#username").val(username)
})
使用.html()方法将js的值回显到页面 可以进行html格式拼接 最终呈现html的效果
$(function (){
let username="username";
//使用单引号 会自动识别html的格式
let html='<button> 这是js给我的值</button>'
$("#username").val(username)
$("#container").html(html)
})
两个方法都可以将得到的值回显到页面 如果只需要这个数据 那么就可以用.val()方法 如果 想要回显数据并且为数据添加格式 那么就可以使用.html()方法
在拼接字符时如何引用参数
在调用.html()方法时 如果我们需要在返回的样式中 引用参数 应该怎么做？
使用‘+变量名+’即可 两个英文状态的单引号 两个+号 中间显示变量名
function info(){
let username=$("#username").val()
userCode=parseInt(username)
$.ajax({
url: "http://localhost:8080/user/getUserById/"+userCode,
dataType: "json",
type: "get",
async:"true",
success:function (res){
console.log(res.data)
let userInfo=res.data
let username=userInfo.username
let password=userInfo.password
let realname=userInfo.realname
let html='<table >\n' +
' <tr>\n' +
' <th>用户名</th>\n' +
' <th>密码</th>\n' +
' <th>真实姓名</th>\n' +
' </tr>\n' +
' <tr>\n' +
' <td>'+username+'</td>\n' +
' <td>'+password+'</td>\n' +
' <td>'+realname+'</td>\n' +
' </tr>\n' +
'</table>'
$("#container").html(html)
},
error:function (res){
alert("请输入正确格式的编号")
}
})
}
通过.val()、.html()两个方法 我们就可以实现在页面不刷新的情况下 进行数据的局部刷新
使用iframe标签实现表单的异步提交
iframe实际上就是模拟一个表单A的替身表单B 获取表单A的数据 从而在表单A提交的时候 代替表单A完成提交操作 而不刷新当前页面 实际提交的是替身表单B的数据
<form action="/iframe" method="post" target="targetIfr" id="smb">
<lable for="name">姓名</lable>
<input type="text" name="name" id="name">
<lable for="age">年龄</lable>
<input type="text" name="age" id="age">
<lable for="sex">性别</lable>
<input type="text" name="sex" id="sex">
<input type="submit" value="提交">
</form>
<iframe name="targetIfr" style="display:none" ></iframe>
我们可以使用js进行页面提示 如果提交成功 就清除输入框内容 提交失败 就提示弹窗
$("#smb").submit(function (){
let url=$(this).action;
let method=$(this).method;
let data=$(this).serialize();
$.ajax({
url:url,
type:method,
data:data,
success:function (res){
$("input[name='name']").val("");
$("#age").val("");
$("#sex").val("")
alert("success")
},
error:function (){
alert("error")
}
})
})
$("#smb").submit(function (){}这个方法可以拿到表单A这个对象 调用相关API 获取表单数据
js创建formData对象 获取表单元素 完成后台提交
一共有两种思路
第一种是创建一个formData对象 通过id选择器给相关元素赋值
另一种是通过得到form表单对象 将form表单的内容直接赋值给formDara 如果还有需要添加的值 就调用append方法 添加需要的元素信息即可
第一种
let data= new FormData();
data.append("name",$("#name").val())
data.append("file",$("#info").files) 自己构造一个表单 值从id中拿值*/
var request = new XMLHttpRequest();
request.open("POST", "http://localhost:8080//upLoadImg");
request.send(data)
不过我感觉这种方式纯属没用
第二种
let formData=new FormData($("#form")[0])
formData.append("age","20");
var request = new XMLHttpRequest();
request.open("POST", "http://localhost:8080//upLoadImg");
request.send(formData)
直接将form表单对象 赋值给formData 完成formData的实例化
然后调用append方法添加后台需要 但是表单中不能显示的数据
扫一扫
126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
