首页 > 有多个参数想通过ajax传递给服务端,使用from标签还是用div等。

有多个参数想通过ajax传递给服务端,使用from标签还是用div等。

有一个参数要用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给服务器就好了。

【热门文章】
【热门文章】