jquery - 未调用 JQuery getJSON 方法
问题描述
我正在尝试使用 jQuery 和 json 创建一个带有分页的表,但无法使该getJSON
方法正常工作。JavaScript 函数GetPageData
在页面加载时被调用并且被成功调用。我已经测试在下面的代码中添加了两个注释掉的行,并且可以看到该getJSON
方法内的任何代码都没有任何效果。
function GetPageData(pageNum, pageSize) {
$("#tblData").empty();
$("#paged").empty();
// $("#tblData").append('<tr><td>1</td><td>2</td></tr>')
$.getJSON("/Retailers/GetPagedData", { pageNumber: pageNum, pageSize: pageSize }, function (response) {
// $("#tblData").append('<tr><td>1</td><td>2</td></tr>')
var rowData = "";
for (var i = 0; i < response.Data.length; i++) {
rowData = rowData + '<tr><td>' + response.Data[i].Name + '</td><td>' + response.Data[i].RetailerCode + '</td></tr>';
}
rowData = rowData + '<tr><td>Name</td><td>RetailerCode</td></tr>';
$("#tblData").append(rowData);
PagingTemplate(response.TotalPages, response.CurrentPage);
});
下面是零售商文件夹中的 Index.cshtml 视图。
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
@{
ViewBag.Title = "Manage Retailers";
}
<p class="h2">Manage Retailers</p>
<br /><br />
<table class="table table-bordered">
<thead>
<tr>
<th>Retailer Name</th>
<th>Retailer Code</th>
</tr>
</thead>
<tbody id="tblData"></tbody>
</table>
<div id="paged"></div>
下面是零售商控制器...
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using CCM.Models;
using CCM.Helper;
namespace CCM.Controllers
{
public class RetailersController : Controller
{
MCDevEntities context = new MCDevEntities();
public ActionResult Index()
{
return View();
}
public ActionResult GetPagedData(int pageNumber = 1, int pageSize = 20)
{
List<Retailer> listData = context.Retailers.ToList();
var pagedData = Pagination.PagedResult(listData, pageNumber, pageSize);
return Json(pagedData, JsonRequestBehavior.AllowGet);
}
}
}
我是否遗漏了任何可能阻止其工作的明显内容?我还有一个包含 PagedData.cs 和 Pagination.cs 的 Helper 文件夹。页面 URL 是 localhost:.../Retailers/Index。
编辑。
万一它在这里有帮助是javascript的其余部分:
$(document).ready(function () {
//Initially load pagenumber=1, pagesize=20
GetPageData(1, 20);
});
function PagingTemplate(totalPage, currentPage) {
var template = "";
var TotalPages = totalPage;
var CurrentPage = currentPage;
var PageNumberArray = Array();
var countIncr = 1;
for (var i = currentPage; i <= totalPage; i++) {
PageNumberArray[0] = currentPage;
if (totalPage != currentPage && PageNumberArray[countIncr - 1] != totalPage) {
PageNumberArray[countIncr] = i + 1;
}
countIncr++;
};
PageNumberArray = PageNumberArray.slice(0, 5);
var FirstPage = 1;
var LastPage = totalPage;
if (totalPage != currentPage) {
var ForwardOne = currentPage + 1;
}
var BackwardOne = 1;
if (currentPage > 1) {
BackwardOne = currentPage - 1;
}
template = "<p>" + CurrentPage + " of " + TotalPages + " pages</p>"
template = template + '<ul class="pager">' +
'<li class="previous"><a href="#" onclick="GetPageData(' + FirstPage + ')"><i class="fa fa-fast-backward"></i> First</a></li>' +
'<li><select ng-model="pageSize" id="selectedId"><option value="20" selected>20</option><option value="50">50</option><option value="100">100</option><option value="150">150</option></select> </li>' +
'<li><a href="#" onclick="GetPageData(' + BackwardOne + ')"><i class="glyphicon glyphicon-backward"></i></a>';
var numberingLoop = "";
for (var i = 0; i < PageNumberArray.length; i++) {
numberingLoop = numberingLoop + '<a class="page-number active" onclick="GetPageData(' + PageNumberArray[i] + ')" href="#">' + PageNumberArray[i] + ' </a>'
}
template = template + numberingLoop + '<a href="#" onclick="GetPageData(' + ForwardOne + ')" ><i class="glyphicon glyphicon-forward"></i></a></li>' +
'<li class="next"><a href="#" onclick="GetPageData(' + LastPage + ')">Last <i class="fa fa-fast-forward"></i></a></li></ul>';
$("#paged").append(template);
$('#selectedId').change(function () {
GetPageData(1, $(this).val());
});
}
解决方案
尝试使用下面的代码
$.ajax({
url: '/Retailers/GetPagedData',
data: {
pageNumber: pageNum,
pageSize: pageSize
},
success: function (response) {
//code
}
});
推荐阅读
- wpf - 如何让讲述人阅读 WPF 弹出窗口中的文本?
- homebrew - K 框架安装在 MacBookPro 19 OS X Mojave 10.14.6 上反复失败
- r - 桑基图 R 中的百分比
- sql - 两个日期之间的记录 Oracle SQL
- javascript - 如果具有 X 类的对象也具有 Y 类,则执行
- python - 如何在 Python 中获取 `A^(-1/2)`?
- c++ - 使用指针检查分数是否在 0 到 100 之间
- iphone - 是否可以在 Safari 上获取用户的相机 (getUserMedia) 后立即播放音频文件?
- python - 识别重复对的 Python 列表
- doctrine-orm - 并在 LEFT JOIN 中加入 Doctrine