<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax前后端交互_通过Ajax进行</title>
</head>
<body>
<form>
用户名：<input type="text" placeholder="请输入用户名" name="user"><br>
密 码：<input type="password" placeholder="请输入密码" name="pwd"><br>
性别：<label for="male">男</label>
<input type="radio" name="sex" value="male" id="male">
<label for="female">女</label>
<input type="radio" name="sex" value="female" id="female">
<label for="no">保密</label>
<input type="radio" name="sex" value="no" id="no" checked>
<br>
爱好：<label for="sing">唱歌</label>
<input type="checkbox" name="hobby" id="sing" value="sing" checked>
<label for="dance">跳舞</label>
<input type="checkbox" name="hobby" id="dance" value="dance">
<label for="draw">画画</label>
<input type="checkbox" name="hobby" id="draw" value="draw">
<br>
上传头像：<input type="file" accept="image/*" name="file"><br>
地址：<select name="address" id="address" size="1">
<optgroup label="河南省">
<option value="ZZ">郑州市</option>
<option value="XY">信阳市</option>
<option value="NY">南阳市</option>
</optgroup>
<optgroup label="湖北省">
<option value="WH">武汉市</option>
</optgroup>
<optgroup label="湖南市">
<option value="CS">长沙市</option>
</optgroup>
</select>
<br>
个人简介：<textarea name="introduce" id="introduce" cols="30" rows="10"></textarea><br>
<input type="button" value="提交" id="btn1">
<input type="reset">
</form>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
var $btn = $("#btn1");
$btn.click(function () {
var $user = $("input[name='user']").val();
var $pwd = $("input[name='pwd']").val();
var $sex = $("input[name='sex']:checked").val();
var $hobbies = $("input[name='hobby']:checked").map(function () {
return $(this).val();
}).get().join(',');
var $file = $("input[name='file']").val();
var $add = $("select").val();
var $intro = $("textarea").val();
$.ajax({
"type":"post",
"url":"/",
"data":{
"user":$user,
"pwd":$pwd,
"sex":$sex,
"hobbies":$hobbies,
"file":$file,
"add":$add,
"intro":$intro
}
})
})
</script>
</body>
</html>
这是前端页面源码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax前后端交互_通过Ajax进行</title>
</head>
<body>
<form>
用户名：<input type="text" placeholder="请输入用户名" name="user"><br>
密 码：<input type="password" placeholder="请输入密码" name="pwd"><br>
性别：<label for="male">男</label>
<input type="radio" name="sex" value="male" id="male">
<label for="female">女</label>
<input type="radio" name="sex" value="female" id="female">
<label for="no">保密</label>
<input type="radio" name="sex" value="no" id="no" checked>
<br>
爱好：<label for="sing">唱歌</label>
<input type="checkbox" name="hobby" id="sing" value="sing" checked>
<label for="dance">跳舞</label>
<input type="checkbox" name="hobby" id="dance" value="dance">
<label for="draw">画画</label>
<input type="checkbox" name="hobby" id="draw" value="draw">
<br>
上传头像：<input type="file" accept="image/*" name="file"><br>
地址：<select name="address" id="address" size="1">
<optgroup label="河南省">
<option value="ZZ">郑州市</option>
<option value="XY">信阳市</option>
<option value="NY">南阳市</option>
</optgroup>
<optgroup label="湖北省">
<option value="WH">武汉市</option>
</optgroup>
<optgroup label="湖南市">
<option value="CS">长沙市</option>
</optgroup>
</select>
<br>
个人简介：<textarea name="introduce" id="introduce" cols="30" rows="10"></textarea><br>
<input type="button" value="提交" id="btn1">
<input type="reset">
</form>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
var $btn = $("#btn1");
$btn.click(function () {
var $user = $("input[name='user']").val();
var $pwd = $("input[name='pwd']").val();
var $sex = $("input[name='sex']:checked").val();
var $hobbies = $("input[name='hobby']:checked").map(function () {
return $(this).val();
}).get().join(',');
var $file = $("input[name='file']").val();
var $add = $("select").val();
var $intro = $("textarea").val();
$.ajax({
"type":"post",
"url":"/",
"data":{
"user":$user,
"pwd":$pwd,
"sex":$sex,
"hobbies":$hobbies,
"file":$file,
"add":$add,
"intro":$intro
}
})
})
</script>
</body>
</html>
这是前端页面源码
