我在做一个个人信息页面,首页可以展示个人信息,点击添加,可以跳到add.html 填写个人信息,如下图。我填写信息,上传图片,发现,点击submit,可以在首页显示信息,但是页面总是停留在这个add,要手动点击浏览器后退,没法自动回调。还有一个奇怪的地方就是,上传图片旁边上传按钮,连续按多几次,居然可以回调到首页。这个是nodejs mongodb ajax工程。
html
<form enctype='multipart/form-data' method='post' action="" role = "form" id = "img_A" class="img_answer" >
name: <input type="text" name="uid" id="uid"/><br/><br/>
gender:<input type="text" name="title" id="title"/><br/><br/>
age: <input type="text" name="content" id="content"/><br/><br/>
emaill:<input type="text" name="age" id="age"/><br/><br/>
files地址:<input type="text" name="uploadFile" id="files"/><br/><br/>
<!-- 增加一个files用于保存返回的文件地址 -->
<input type = "file" name = "file" id="img_file_A" onchange="submitImg()"/>
<button id="upload_A" style="color:black"><a href="javascript:;" style="color:black">上传</a></button><br/><br/>
<input type="submit" id="submit" value='submit'/>
<input type="reset" value="reset"/>
</form>
ajax
<script type="text/javascript">
// if (!window.$) {
// alert('没有jquery')
// }
function submitImg(){ //
var form = new FormData(document.getElementById("img_file_A").files[0]); //接口只接受图片,这里应该获取的是img_file_A标签中的files
$.ajax({
url:"http://localhost:3000/upload",
type:"post",
data:form,
cache: false,
processData: false,
contentType: false,
success:function(data){
alert("success!");
$('#files').val(JSON.parse(res).data.url) ;//将提交图片成功返回的图片地址设置到files中,有可能返回的不符合json格式,可以用JSON.parse解析
},
error:function(e){
console.log(e)
alert("error!!");
}
});
}
$('#submit').click(function(e) {
var e = e||event;
e.preventDefault();//阻止submit表情默认行为
window.location.href='http://localhost:3000'
onClick()
})
function onClick(){ //提交全部文字信息用于数据库保存字段
$.ajax({
url : 'http://localhost:3000/add.html',
type : 'post',
data : {
uid : $('#uid').val(),
title: $('#title').val(),
content : $('#content').val(),
age: $('#age').val(),
files: $('#files').val()
},
success : function(data){
console.log(data);
window.location.href='http://localhost:3000'
},
error : function(data){
console.log(data)
window.location.href='http://localhost:3000'
}
})
}
你的上传按钮写在form表单中,而且又没指定类型为button 所以默认行为是submit,相当于类似刷新这个页面,你试试在这个按钮加一个type="button" 应该就能解决你说的回调问题