javascript - 初学者，关于ajax 页面不能回调的问题

问题描述

问 题

我在做一个个人信息页面，首页可以展示个人信息，点击添加，可以跳到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" 应该就能解决你说的回调问题

这篇关于javascript - 初学者，关于ajax 页面不能回调的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！