有一个参数要用ajax方式传递给服务端。为了实现单行用了bootstrap
中的form-inline
示例:
<form class="form-inline">
<label for="startTime">开始时间</label>
<input id="startTime" readonly="readonly" type="text" value="@DateTime.Now.AddHours(-1).ToString("yyyy-MM-dd HH:mm")">
<label for="endTime">结束时间</label>
<input id="endTime" type="text" readonly="readonly" value="@DateTime.Now.ToString("yyyy-MM-dd HH:mm")" />
<label for="moduleName">模块名称</label>
<input id="moduleName" type="text" />
<button class="pull-right" type="button" id="filter">过滤</button>
</form>
在button
点击时通过ajax
的方式将三个参数传递给服务端。但是如果外面用form标签的话就会刷新整个页面。当然可以通过将button
拿出,但是想了解一下从语义方面来说是否应该使用form标签?
还有简单的将所有内容单行的方式是什么,这么写?
#div > * {
display:inline-block;
}
其实我并不是真的要通过POST
提交数据到服务器,其实是用jQuery DataTable
传递数据给服务。这个表单只是用来收集数据。按钮用来触发dataTable
的重绘,重绘过程中DataTable
会将数据用GET
方式提交给服务器。
Bootstrap里,form-inline不一定非得用给form标签,直接用给div也是可以的。
<div class = "form-inlie">
</div>
这个不会影响你的显示,但可以解决刷新的问题。
form添加onSubmit
事件,这样button点击后会触发这个事件,回调函数里面获取到每个input的值,通过ajax发一个get或者post请求将数据传递到服务器,同时停止form提交。
$("form#id").("submit",function(){
var v1=$("#input1").val(),v2=$("#input2").val().......
$.post("url",parameters,callback);
return false;
});
return false;
是关键。
====================================================================
更新(因为评论里面不好排版,所以对楼主的回应更新在回答里面):
1 如果我有两个按钮,一个想用条件查询,一个想用这些条件删除是不是只能在函数中判断是那个按钮被点击 判断是哪个button被点击然后向服务器请求不同的操作是可行的。
不过如果是我的话,我会在button绑定一个属性,比如:
<button type="button" data-action="query" class="btn btn-query">
<button type="button" data-action="delete" class="btn btn-delete">
然后就不要用form的onSubmit事件了,直接用button的click事件:
$(".btn").click(function(){
var v1=$("#input1").val(),v2=$("#input2").val().......
var action=$(this).data('action');
var url="url based action";
$.post(url,parameters,callback);
return false;
});
2 不太清楚你说的用div
是什么意思。
这个推荐用jquery的form插件,把form给serialize然后ajax post给服务器就好了。