码迷,mamicode.com
首页 > Web开发 > 详细

后端与前端交互Ajax接口

时间:2018-02-25 15:59:32      阅读:636      评论:0      收藏:0      [点我收藏+]

标签:UI   ring   gpo   删除   load   设计   ngui   row   接口   

   这种交互方式运用MVC的设计模式,有一个简单的交互。

  这是一种读取数据并分页。将所获取对象转换成Json格式

 后台controller Ajax接口:

public ActionResult  视图名称 (int p=1,int s=1,string keyword="")   
{
JsonpResult<object> json = CommonBLL.GetErrorJSONP("初始化中");
try
{
var pm = new PageModel()
{
CurrentPage=p,
PageSize=s,
};
if (keyword != "")
{
pm.OrCondition.Add(new SearchCondition()
{
ConditionField="字段名称",
SearchType=SearchType.Like,
ConditionValue1=keyword,
});
}
var LstClass = ClassBLL.GetClass(pm);
var getval = new
{
success=true,
code=0,
data=LstClass,
datacount=pm.DataCount,
maxpage=pm.MaxPage,
};
json = new JsonpResult<object>(getval);
}
catch(Exception ex)
{
json = CommonBLL.GetErrorJSONP(ex.Message);
}
return json;
}

Ajax:

$.ajax({
    type: "POST",
   url: gSiteURI + "FrontEnd/GetClassList",
   data: "p=" + pm.CurrentPage +
  "&s=" + pm.PageSize +
  "&keyword=" + $("#keyword").val(),
   dataType: "json",
   success: function (jsonObj) {
   if (jsonObj.success) {
pm.DataCount = jsonObj.datacount;
pm.MaxPage = jsonObj.maxpage;
pm.PageEventCallBack = function () { LoadData(); };

ModelPagerInit("Data_pager", "Data");

var sList = jsonObj.data;
var htmlStr = "";
for (var i = 0; i < sList.length; i++) {
var data = sList[i];
htmlStr += ‘<tr class="text-c va-m">‘;
htmlStr += ‘<td><input type="checkbox" value="‘ + data.ClassID + ‘" class="cbxid" name=""></td>‘;
htmlStr += ‘<td>‘ + data.ClassName + ‘</td>‘;
htmlStr += ‘<td class="td-manage">‘;
htmlStr += ‘<a title="编辑" href="javascript:;" class="ml-5" onclick="edit_show(‘ + data.ClassID + ‘)">‘;
htmlStr += ‘<i class="Hui-iconfont">&#xe6df;</i>‘;
htmlStr += ‘</a>‘;
htmlStr += ‘<a title="删除" href="javascript:;" class="ml-5" onclick="del_data(‘ + data.ClassID + ‘)">‘;
htmlStr += ‘<i class="Hui-iconfont">&#xe6e2;</i>‘;
htmlStr += ‘</a>‘;
htmlStr += ‘</td>‘;
htmlStr += ‘</tr>‘;
}
htmlStr = htmlStr !== "" ? htmlStr : "<tr><td colspan=‘8‘ class=‘center‘>暂无数据</td></tr>";
$("#Data_tbody").html(htmlStr);
}
else {
alert(jsonObj.msg);
}
HideLoadingUI();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
HideLoadingUI();
}
});
}

后端与前端交互Ajax接口

标签:UI   ring   gpo   删除   load   设计   ngui   row   接口   

原文地址:https://www.cnblogs.com/Xtudou/p/8469373.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!