1. 传统上传方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<form action="regist.json" enctype="multipart/form-data" method="post" id="aaa" >
<table>
<tr>
<td>name:</td>
<td><input type="text" placeholder="name" name="userName"></td>
</tr>
<tr>
<td>password:</td>
<td><input type="password" placeholder="password" name="password "></td>
</tr>
<tr>
<td>image:</td>
<td><input type="file" name='file'></td>
</tr>
<tr>
<td rowspan="2"></td>
<td><input type="reset" value='reset'> <input type="submit" value="submit"></td>
</tr>
</table>
</form>
</div>
<script src="http://192.168.1.100:4000/content/jquery.min.js"></script>
<script>
// $('form').submit(function(e){
// e.preventDefault();
// // alert('aaa');
// var ser = $('#aaa').serialize();
// alert(ser);
// });
$('#aaa').on('submit',function(e){
e.preventDefault();
$.ajax({
url:"regist.json",
type:'POST',
data:$('#aaa').serialize(),
success:function(data){
alert(data);
},
error:function(data){
alert(data);
}
});
});
</script>
</body>
</html>
注意：以上方式会导致整个页面刷新，不刷新整个页面需要使用ajax局部刷新技术。
2. ajax局部刷新
$('#aaa').on('submit',function(e){
e.preventDefault();
$.ajax({
url:"regist.json",
type:'POST',
data:$('#aaa').serialize(),
success:function(data){
alert(data);
},
error:function(data){
alert(data);
}
});
});
注意：使用ajax实现了局部刷新，并且把参数序列化传递给了服务器，但这种方式无法实现文件类型上传。
3. ajax文件上传
$('#aaa').on('submit',function(e){
e.preventDefault();
var formobj = document.getElementById('aaa');
var formdata = new FormData(formobj);
$.ajax({
url:"regist.json",
type:'POST',
cache:false,
processData:false,
contentType:false,
data:formdata,
success:function(data){
alert(data);
},
error:function(data){
alert(data);
}
});
});
注意：了解更多，请点击https://blog.csdn.net/inuyasha1121/article/details/51915742
网友评论