美文网首页
网页前后端数据交互

网页前后端数据交互

作者: atsukodan | 来源:发表于2017-03-20 16:08 被阅读629次

经过几个月关于web的开发,总结下比较基础的数据交互。

form表单提交

<form action=" " method=" ">
  <input type="text" name=" " value=" "/>
  <input type="submit" value="提交"/>
</form>

在表单中用type="submit"属性的input或者button按钮,点击后表单会将所有有name属性的值(value)以method上的方式(get、post)提交到action上的地址上。

  • type="submit"可以直接提交表单,若是按钮就只是单纯点击,需要自行绑定点击事件。
  • 以这种方式提交数据页面会跳转,且没有数据返回。
  • type="submit"是将表单提交(即form.submit()方法)作为其onclick后的默认事件。

$('#form').serializeArray()

这是直接将id="form"的表单所有的name值提交,但不能提交input type="file"的类型。


Ajax提交

  • get方式提交
$.get("地址",{"键":值, "键":值 },function(data) {
     data   //返回的值
})
  • post方式提交
$.post("地址",{"键":值, "键":值 },function(data) {
     data   //返回的值
})
  • ajax方式提交
$.ajax({
    type: 'POST',
    url: ,
    data: {"键":值, "键":值 } ,
    dataType: 'json',
    success: function(data){successCallback(data)},
    error: function(jqXHR){failureCallback(jqXHR)},
})

这些提交方式都是不会跳转页面且可以返回数据的。


a标签

  • URL地址带参数
<a href="提交地址?name=value"></a>

这种情况是以get方式提交的。

  • a标签的点击事件
<a href="javascript:;" onclick="dis()"></a>
<script>
     function dis() {}
</script>

比较经常用的提交方式,希望能够给大家提供帮助。


PS:如果需要页面刷新但不跳转,可以用iframe处理。

<iframe name="submitFrame" src="about:blank" style="display:none"></iframe>
<form target="submitFrame" action="" method="">
  ...
</form>

相关文章

  • 网页前后端数据交互

    经过几个月关于web的开发,总结下比较基础的数据交互。 form表单提交 在表单中用type="submit"属性...

  • 2018-02-08

    前端与后端的数据交互 前端与后端的数据交互,最常用的就是GET、POST,比较常用的用法是:提交表单数据到后端,后...

  • HTTP协议、存储、Ajax

    前后端数据交互与 HTTP 协议 1、前后端通信是什么(1)前端和后端交互的过程(2)浏览器和服务器之间数据交互的...

  • 前后端数据交互方法总结

    前后端数据交互方法 在此介绍几种常用的前后端数据交互方法,并给出使用建议。以提高前后端协同开发的效率。 目录: H...

  • 前后端数据交互方法

    《前后端数据交互方法》http://www.zhihu.com/question/26532621一个小案例搞懂前...

  • hybirdApp网页调试神器 Charles

    1.为什么需要Charles? 混合app里面会嵌套网页,如果需要进行数据交互的页面。针对页面有没前后端分离,我们...

  • json-server模拟服务端REST接口

    在web项目开发中,前端完成静态页面的开发后,后端迟迟未给到接口,会导致前、后端数据交互的开发流程中停滞。可以根据...

  • python中的ajax

    前端与后端的数据交互,最常用的就是GET、POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的...

  • 前端与后端的数据交互(jquery ajax+python fl

    前端与后端的数据交互,最常用的就是GET、POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的...

  • 高效开发实践

    前端实现业务,后端处理数据。在现代框架实现前后端分离后,前后端的交互基本分为2种: 数据读取和数据写入。而前端由于...

网友评论

      本文标题:网页前后端数据交互

      本文链接:https://www.haomeiwen.com/subject/lifinttx.html