jquery easyui怎么实现前后台数据的交互
要看你用easyui的哪个组件了,一般官世陵网上都有,我拿一个很简单的例子来说:
使用datagrid
<table class="easyui-datagrid" style="width:400px;height:250px"
data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
……
</table>
这里的data-options里有url的参数,可以换为后台url地址,而后台只要返回一个符合要求稿返陆的json格式的数据过来就可以了。这里的json格式可以看看官网里的要求键顷格式。
http://www.jeasyui.com/documentation/index.php
还有一种方法是使用js来加载数据:
页面代码比较简单:<table id="dg"></table>
js代码这么写:
$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]]
});
在url里写好后台url的路径就可以了,后台同样是返回一个json给页面。
再者,你想要提交数据给后台?
那么我就说一般情况,就是使用按钮点击提交
可以用form表单提交, action指定后台确定的url,
要么你可以在js中,取得想要传递给后台的数据,写一个$.post或者$.ajax等方法去将数据传递给后台去处理。
这是ajax请求后台的模板:
$.ajax({
type: 'post',
url: 'url', // this is the url for backend java program
data: {'data_post': data_post}, // the data you want to post to backend.
success: function(result){
alert('success');
}
})
EasyUI每一个亮好插件都有一个URL参数
根据差散EasyUI要求返回指定的Json数据
查看虚键氏EasyUI官网,查看详细内容。
如下:
$.ajax({
url: '你迹瞎孝要处神早理的後台页面',
type: 'post',
dataType: "json",
data: { '後台方法参数名': ’你的参数值‘ },
success: function (data) {//data为返回的姿稿Json结果
if (data.result == "success") {
//你的处理动作;
}
else {
//你的处理动作;
}
},
error: function (xhr, error, ex) {
alert("出现异常");
}
});
希望能帮到你
easyui要神租实现前后台的数据交旦瞎腔互,大体来讲可以按以下顺序来操作
1、了解当前组件数据的所需格式,一般都是json结构
2、后台通过easyui所请求的地址,返回相应的数据(json)
3、获取到数据后,设置要显示的效果。
示例:easyui中的datagrid组件模衫。
格式要求如:
{total:1000,rows:[{title:122},{title:122},{title:122},{title:122}]}
其中 total 是数据量,rows是当前页的数据
设置datagrid为ajax加载,只需要设置href为请求地址就可以了