EsayUI的交互方式

问题form表单提交请求

 <form id="searchForm" method="post">
            <%--其中的name,id属性非常重要,我们可以通过很多种方式获得其中的值--%>
            用户名: <input name="username" class="easyui-textbox" style="80px">
            邮件: <input name="email" class="easyui-textbox" style="80px">
            <%--valueField 这个属性为前端传过来存入其中我们需要确定是否为id
            textField需要确定是否为text--%>
            部门<input  class="easyui-combobox" name="departmentId"
                       data-options="valueField:'id',textField:'name',url:'/department/findAll'" />
            <a href="#" data-method="search" class="  easyui-linkbutton" iconCls="icon-search">Search</a>
        </form>

这里和我们以前提交的时候有很多不同,怎么接收参数,点击提交的时候怎么把参数和请求等东西传过去

这里的解决办法为在<a href="#" data-method="search" class="  easyui-linkbutton" iconCls="icon-search">Search</a>

data-method="search"这个方法,然后我们在js中写入对应的动态调用

$(function () {
    //为什么需要提取出来,把我们这种数据提前加载出来,1.提高性能
    //2.当我们做修改的时候
    var employeeGrid=$('#employeeGrid');
    var searchForm=$('#searchForm');
    $("*[data-method]").on("click",function () {
        jiedada[$(this).data("method")]();
    });
    var jiedada={
        /*高级查询,首先获得参数,然后去查询,返回数据,刷新页面
        * */
        search:function () {
            /*把表单种的数据转化为对象,但是必须通过name属性
            这个方法需要导入扩展包,jquery.jdrik.js才能实现
            * */
            var param = searchForm.serializeObject();

            /*
            使用datagrid刷新数据,并且传入参数,
            因为employeeGrid在发送的时候几经发送了url,
            所以我们可以直接传入参数
            使用第二种方式
             employeeGrid.datagrid('load',{
             username:$('#username'),
             email:$('#email'),
             });
            */
        
/*这里我们加载的时候回去datagrid中找到请求,发送请求所以我们不需要发送
但是前后请求中要能够接收这样的参数
* */
employeeGrid.datagrid('load',param); },
原文地址:https://www.cnblogs.com/xiaoruirui/p/11669626.html