网页前后端数据交互

经过几个月关于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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容