AJAX发布使用axios作为formdata代替URLSearchParams发送数据

时间:2020-05-15 12:45:02

标签: javascript ajax jsp axios web-deployment

我正在尝试使用axios API发布数据,但是有些事情我做对了。

这很好...

<div id="view">
    <input type="hidden" name="command" id="command" value="insert">
            id: <input name="id" id="id"><br>
            password: <input name="password" id="password"><br>
            <br> <br> 
            <input type="button" onclick="insertData()" value="register">;
</div>
<script>
function insertData(){
            var params = new URLSearchParams();
            params.append("command", document.querySelector("#command").value);
            params.append("id", document.querySelector('#id').value);
            params.append("password", document.querySelector('#password').value);

            axios.post("Controller", params)
            .then(res =>{
               document.querySelector("#view").innerHTML = res.data;
            }).catch(error=>console.log());
         }
</script>

但是,当我尝试使用formdata进行相同的逻辑时,我的浏览器以某种方式重定向到“ index.html”并显示response.status cod 304/302,这不是我要获取的内容。

<div id="view">
        <br>
        <form id="myForm" action="controller" method="post">    
            <input type="hidden" name="command" id="command" value="insert">
            id: <input name="id" id="id"><br>
            password: <input name="password" id="password"><br>
            name: <input name="name" id="name"><br>
            email: <input name="email" id="email"><br>
            <br> <br> <input type="button" onclick="insertCust()" value="register">
        </form>

        </div>
    <script type="text/javascript">

        function insertCust() {
            var formdata = new FormData();
            formdata.append('command', document.querySelector('#command').value);
            formdata.append('id', document.querySelector('#id').value);
            formdata.append('password', document.querySelector('#password').value);

            axios.post("controller", formdata, true).then(res => {
                    document.querySelector("#view").innerHTML = res.data;
            }).catch(
                    error=>console.log(error)
            )
        }

      </script>

谢谢你,永远!

编辑:我已经通过在发送数据之前将formdata编码为URLSearchParams来解决了这个问题。

const newformdata = new URLSearchParams(formdata);

我也尝试添加

 data: formdata,
 headers: {'Content-Type': 'xhr' }
我的axios函数中的

,但它返回相同的结果。我仍然很困惑我的问题所在。

0 个答案:

没有答案