分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

后端与前端交互Ajax接口

发布时间:2023-09-06 01:43责任编辑:苏小强关键词:前端后端Ajax

   这种交互方式运用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接口

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved