网页前后端数据交互

2017-03-20  本文已影响629人  atsukodan

经过几个月关于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上的地址上。


$('#form').serializeArray()

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


Ajax提交

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

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


a标签

<a href="提交地址?name=value"></a>

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

<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>
上一篇 下一篇

猜你喜欢

热点阅读