html的form提交之后，是如何进行跳转的？整个过程浏览器是如何实现的？

Posted 2023-04-13

html的form提交之后，是如何进行跳转的？整个过程浏览器是如何实现的？
浏览器会自动打开action中的url吗？

参考技术A form表单的action 与url跳转是不一样的：

form表单可以给后台传递数据，在后台直接可以用request对象去向前台请求数据。
form表单传递数据有两种方式：
method="post":这是传递大量数据时用的，在数据传递之前会先将数据打包，因此这种传递数据的方式会效率会比较慢，但是穿过的数据都能正确解析，因此传中文不会有乱码。
method="get"：以URL传递的，因为地址栏长度有限，所以对数据量是有限制的，而且传递的数据必须是ASCCI码值范围内的，因此，传中文会有乱码，需特殊处理。

url跳转到action只能通过url的参数来传递数据，action?参数名=参数值&……，在后台也可以用request对象去向前台请求url的参数值（url传中文参数需要进行特殊处理）追问

我的意思是，form用post方式提交之后，当前页面会进行自动跳转到action的url吗不是？

追答

嗯，是的

本回答被提问者和网友采纳

获取form表单默认提交的返回值

1.经常用form表单提交的小伙伴有没有发现，form表单默认的提交是没有返回值的，而且默认提交成功之后是跳转，跳转的action的路径，下面写一下默认的提交如何获取到form表单的返回值json，并且阻止默认的跳转动作。

页面结构见下面：

<form target="form" action="" enctype="multipart/form-data" method="post">

     <input type="file">

     <button type="submit"    id="submit" style="display:none">提交</button> 

</form>

<iframe name="form" id="form" style="display:none"></iframe>

//细心的小伙伴有没有发现上面的结构多了一个iframe的隐藏内联框架，其实最主要的就是我们的form表单的target属性值等于这个iframe的name和id，那么我们就可以用iframe来接收返回值，并且把默认的跳转让iframe去跳转，下面是js的代码，来获取这个返回值json。

$("#submit").click();

$("#form").load(function(){

      var text = $(this).contents().find("body").text();      //获取到的是json的字符串

     var j = $.parseJSON(text);                                         //json字符串转换成json对象

     console.log(j)

})

//注意，只要这个iframe框架加载完成就说明发送成功了

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。