99 lines
3.3 KiB
HTML
99 lines
3.3 KiB
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>Document</title>
|
|||
|
|
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<input type="text" placeholder="姓名" value="" name="name" id="name">
|
|||
|
|
<div>
|
|||
|
|
<input type="radio" value="1" name="sex">男
|
|||
|
|
<input type="radio" value="2" name="sex">女
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<input type="checkbox" name="hob" value="game">玩游戏
|
|||
|
|
<input type="checkbox" name="hob" value="bilibili">看小视频
|
|||
|
|
<input type="checkbox" name="hob" value="tv">电视剧
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<select name="lesson" id="lesson">
|
|||
|
|
<option value="1">法学</option>
|
|||
|
|
<option value="2">医学</option>
|
|||
|
|
<option value="3">哲学</option>
|
|||
|
|
</select>
|
|||
|
|
<div>
|
|||
|
|
<button onclick="save()">保存</button>
|
|||
|
|
</div>
|
|||
|
|
总结一：
|
|||
|
|
1.radio 选中的时候for循环checked
|
|||
|
|
2.checkbox 选中的时候要用个数组接收，判断是否选中也是用checked属性值
|
|||
|
|
3.select 下拉框 选中的时候要用selected 判断是否选中
|
|||
|
|
4.数组转字符串 可以用join(),toString,for循环遍历数组再拼接字符串
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var obj = {}
|
|||
|
|
// function save(){
|
|||
|
|
// var uname=document.getElementById('name')
|
|||
|
|
// // console.log(uname.value)
|
|||
|
|
// var sex= document.getElementsByName("sex");
|
|||
|
|
// // console.log(sex[0].checked,sex[0].value)
|
|||
|
|
// var hobby=document.getElementsByName('hob')
|
|||
|
|
// // console.log(hobby[0].checked,hobby[0].value)
|
|||
|
|
// var lesson=document.getElementById('lesson')
|
|||
|
|
// // console.log(lesson.options)
|
|||
|
|
// for(let i=0; i<lesson.options.length;i++){
|
|||
|
|
// console.log(lesson.options[i].selected,lesson.options[i].value)
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
function save() {
|
|||
|
|
|
|||
|
|
obj.name = document.getElementById('name').value;
|
|||
|
|
// console.log(obj,123)
|
|||
|
|
var sex = document.getElementsByName('sex')
|
|||
|
|
for (let i = 0; i < sex.length; i++) {
|
|||
|
|
|
|||
|
|
if (sex[i].checked) {
|
|||
|
|
obj.sex = sex[i].value
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var hob = document.getElementsByName("hob")
|
|||
|
|
obj.hob = []
|
|||
|
|
for (let i = 0; i < hob.length; i++) {
|
|||
|
|
if (hob[i].checked) {
|
|||
|
|
obj.hob[i] = hob[i].value
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var lesson = document.getElementById('lesson')
|
|||
|
|
for (let i = 0; i < lesson.length; i++) {
|
|||
|
|
console.log(lesson[i])
|
|||
|
|
if (lesson[i].selected) {
|
|||
|
|
obj.lesson = lesson[i].value
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// obj.hob=obj.hob.join(',')
|
|||
|
|
obj.hob = obj.hob.toString()
|
|||
|
|
console.log(obj, 123)
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 下面是ajax
|
|||
|
|
$.ajax({
|
|||
|
|
url: "https://kaoshi-shangpin.theluyuan.com/findshop",
|
|||
|
|
data:obj,
|
|||
|
|
type:"GET",
|
|||
|
|
dataType:"json",
|
|||
|
|
success: function (res) {
|
|||
|
|
console.log(res)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|