Comment lire du txt avec Ajax et afficher son contenu dans des pages

Cette fois, je vais vous montrer comment Ajax lit le txt et affiche son contenu dans les pages. Comment Ajax lit le txt et affiche son contenu dans les pages Quelles sont les précautions Ce qui suit est un cas pratique ? , jetons un coup d'oeil.

Ce qui suit partagera avec vous le code de base permettant à ajax de lire le txt et d'afficher le contenu du txt dans les pages. Sans plus tarder, je publierai le code directement.

function TransferString(content)
{
var string = content;
try{
string=string.replace(/\r\n/g,"<BR>")
string=string.replace(/\n/g,"<BR>");
string=string.replace(/[ ]/g," ")
string=string.replace(/\ +/g," ")
}catch(e) {
alert(e.message);
}
return string;
}
var pageIndex = 1;
var id = $("#aId").val();
var url = $('#urlArticleContent').val();
var txt = '';
var pageSize = @(ConfigurationManager.AppSettings["ArticlepageSize"]);
var page=5;
var pageCount = 0;
$(function() {
if(url!="")
{
txt = ($.ajax({ url: url, async: false })).responseText;
if (txt.indexOf('http://www.w3.org/1999/xhtml')==-1) {
pageCount = Math.ceil(txt.length / pageSize);
$("#PageCount").html(pageCount);
$('#word').html(TransferString(txt.substring(0, pageSize)));
$('#demo').pagination({
dataSource: function(done){
var result = [];
for (var i = 1; i < pageCount; i++) {
result.push(i);
}
done(result);
},
pageCount:pageCount,
pageSize: 5,
showGoInput: true,
showGoButton: true,
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})
} else {
txt = &#39;&#39;;
}
}
})
function GoHead() {
GoPage(1);
}
function NextClick() {
if (pageIndex < pageCount) {
pageIndex = pageIndex + 1;
} else {
pageIndex = pageCount;
}
GoPage(pageIndex);
$("#pageCurrent").html(pageIndex);
}
function backClick() {
if (pageIndex > 1) {
pageIndex = pageIndex - 1;
GoPage(pageIndex);
$("#pageCurrent").html(pageIndex);
}
}
function GoPageNew() {
var page=$("#pageGo").val();
GoPage(page);
opts.current=page;
}
function GoPage(pageIndex) {
if(pageIndex==0) {
pageIndexStr = $('#goPage').val();
if (pageIndexStr==undefined) {
return false;
}
pageIndexStr = pageIndexStr.trim();
var pageIndex = parseInt(pageIndexStr);
}
$('#page'+pageIndex).siblings().removeClass('active');
$('#page'+pageIndex).addClass('active');
if (pageIndex==1) {
if(!$('#backClick').hasClass('disabled')) {
$('#backClick').addClass('disabled');
}
} else {
$('#backClick').removeClass('disabled');
}
if (pageIndex == pageCount) {
if(!$('#nextClick').hasClass('disabled')) {
$('#nextClick').addClass('disabled');
}
} else {
$('#nextClick').removeClass('disabled');
}
var pageTxt = txt.substring((pageIndex - 1) * pageSize, pageIndex * pageSize);
$('#word').html(TransferString(pageTxt));
$('html, body').animate({
'scrollTop': 0
}, 0);
$("#pageCurrent").html(pageIndex);
}
function PageGo(){ if($('.jump-ipt').val()!=''){
GoPage($('.jump-ipt').val())
}
}
@{
if (null != ViewBag.Ariticle)
{
DataRow dr = ViewBag.Ariticle;
if (null != dr)
{
ViewBag.Title = dr["Title"];
<p class="container">
<p class="row">
<p class="col-xs-12">
<p class="breadcrumb_block">
<span class="tit"><a href="/web/sciencefiction/index">科普IP</a> ></span>
<ol class="breadcrumb">
<li class="active">@dr["Title"]</li>
<li class="active">在线试读</li>
</ol>
<p class="clear"></p>
</p>
</p>
<p class="col-sm-8">
<input type="hidden" name="aId" id="aId" value="@Request["id"]" />
<p class="read_book">
<h3 class="read_tit">@dr["Title"]</h3>
<p class="author">
<span class="ml30"><em id="pageCurrent">1</em>/<em id="PageCount">0</em></span>
</p>
<input type="hidden" value="@dr["FilePath"]" id="urlArticleContent">
<p class="word" id="word">
<nav class="page-my">
<ul class="pagination pull-right fs14" id="demo"></ul>
<p class="clear"></p>
</nav>
<!--底部翻页-->
</p>
<p class="col-sm-3">
<input type="hidden" name="pageCount" id="pageCount" value="@ViewBag.pageCount" />
<!--阅读控制-->
<p class="read_control">
<a href="javascript:;" onclick="backClick()"><span class="icon icon01"></span><em>上一页</em></a>
<a href="javascript:;" onclick="NextClick()"><span class="icon icon02"></span><em>下一页</em></a>
<a href="javascript:;" onclick="GoHead()"><span class="icon icon03"></span><em>回首页</em></a>
</p>
</p>
</p>
</p>
}
}
}

txtCertains traitements doivent être effectués lors du téléchargement du fichier , sinon seul le txt au format UTF8 peut être affiché

/// <summary>
/// 文件上传
/// </summary>
/// <returns></returns>
public JsonResult UploadFiles()
{
HttpPostedFileBase postFile = HttpContext.Request.Files["filesave"];
if (postFile != null)
{
string fileName = Path.GetFileName(postFile.FileName);
string fileExt = Path.GetExtension(fileName.ToLower());
string fileSize = postFile.ContentLength.ToString();
long fileNameTem = Common.GenerateLongId();
string sPath = string.Format("/Data/Material/{0}_{1}.txt", fileNameTem.ToString(), fileName.Replace(".txt", ""));//Guid.NewGuid().ToString().Replace("-", "")
string viewUrl = string.Empty;
string g = Guid.NewGuid().ToString();
if (!Directory.Exists(Server.MapPath("~") + "/Data/Material"))
Directory.CreateDirectory(Server.MapPath("~") + "/Data/Material");
string p = Server.MapPath(sPath);
postFile.SaveAs(p);
if (System.IO.File.Exists(p))
{
StreamReader sr = new StreamReader(p, System.Text.Encoding.Default);
String input = sr.ReadToEnd();
sr.Close();
StreamWriter sw = new StreamWriter(p, false, System.Text.Encoding.UTF8);
sw.WriteLine(input);
sw.Close();
}
return Json(new { FilePath = sPath, FileName = fileName, viewurl = viewUrl, fileSize = fileSize });
}
else
{
return Json(new { FilePath = "" });
}
}

De plus, js est présenté sur la page d'accueil de la page

<script src="~/Scripts/web/jquery.pagination.js"></script>
<link href="~/Content/jquery.pagination.css" rel="stylesheet" />
/**
* pagination分页插件
* @version 1.1.2
* @author mss
* @url http://maxiaoxiang.com/plugin/pagination.html
* @E-mail 251445460@qq.com
*
* @调用方法
* $(selector).pagination();
* 
* @更新日志
* 2016-07-25：修复click重复事件
*/
; (function ($, window, document, undefined) {
//配置参数
var defaults = {
totalData: 0, //数据总条数
showData: 0, //每页显示的条数
pageCount: 9, //总页数,默认为9
current: 1, //当前第几页
prevCls: 'prev', //上一页class
nextCls: 'next', //下一页class
prevContent: '上一页', //上一页内容
nextContent: '下一页', //下一页内容
activeCls: 'active', //当前页选中状态
coping: false, //首页和尾页
homePage: '', //首页节点内容
endPage: '', //尾页节点内容
count: 5, //当前页前后分页个数
jump: true, //跳转到指定页数
jumpIptCls: 'jump-ipt', //文本框内容
jumpBtnCls: 'jump-btn', //跳转按钮
jumpBtn: '跳转', //跳转按钮文本
callback: function () { 
} //回调
};
var Pagination = function (element, options) {
//全局变量
var opts = options,//配置
current,//当前页
$document = $(document),
$obj = $(element);//容器
/**
* 设置总页数
* @param int page 页码
* @return opts.pageCount 总页数配置
*/
this.setTotalPage = function (page) {
return opts.pageCount = page;
};
/**
* 获取总页数
* @return int p 总页数
*/
this.getTotalPage = function () {
var p = opts.totalData || opts.showData ? Math.ceil(parseInt(opts.totalData) / opts.showData) : opts.pageCount;
return p;
};
//获取当前页
this.getCurrent = function () {
return current;
};
/**
* 填充数据
* @param int index 页码
*/
this.filling = function (index) {
var html = '';
current = index || opts.current;//当前页码
var pageCount = this.getTotalPage();
if (current > 1) {//上一页
html += '<li onclick=GoPage(&#39; + (current - 1) + &#39;)><a href="javascript:;" class="&#39; + opts.prevCls + &#39;">' + opts.prevContent + '</a></li>';
} else {
$obj.find('.' + opts.prevCls) && $obj.find('.' + opts.prevCls).remove();
}
if (current >= opts.count * 2 && current != 1 && pageCount != opts.count) {
var home = opts.coping && opts.homePage ? opts.homePage : '1';
html += opts.coping ? '<li onclick=GoPage(&#39; + home + &#39;)><a href="javascript:;" data-page="1">' + home + '</a></li><span>...</span>' : '';
}
var start = current - opts.count,
end = current + opts.count;
((start > 1 && current < opts.count) || current == 1) && end++;
(current > pageCount - opts.count && current >= pageCount) && start++;
for (; start <= end; start++) {
if (start <= pageCount && start >= 1) {
if (start != current) {
html += '<li onclick=GoPage(&#39; + start + &#39;)><a href="javascript:;" data-page="&#39; + start + &#39;">' + start + '</a></li>';
} else {
html += '<li class="&#39; + opts.activeCls + &#39;" onclick=GoPage(&#39; + start + &#39;)><a href="javascript:;"><span>' + start + '</span></a></li>';
}
}
}
if (current + opts.count < pageCount && current >= 1 && pageCount > opts.count) {
var end = opts.coping && opts.endPage ? opts.endPage : pageCount;
html += opts.coping ? '<span>...</span><li onclick=GoPage(&#39; + pageCount + &#39;)><a href="javascript:;" data-page="&#39; + pageCount + &#39;">' + end + '</a></li>' : '';
}
if (current < pageCount) {//下一页
html += &#39;<li onclick=GoPage(&#39; + (current + 1) + &#39;)><a href="javascript:;" class="&#39; + opts.nextCls + &#39;">' + opts.nextContent + '</a></li>'
} else {
$obj.find('.' + opts.nextCls) && $obj.find('.' + opts.nextCls).remove();
}
html += opts.jump ? '<input type="text" class="&#39; + opts.jumpIptCls + &#39;"><a href="javascript:;" onclick=PageGo() class="&#39; + opts.jumpBtnCls + &#39;">' + opts.jumpBtn + '</a>' : '';
$obj.empty().html(html);
};
//绑定事件
this.eventBind = function () {
var self = this;
var pageCount = this.getTotalPage();//总页数
$obj.off().on('click', 'a', function () {
if ($(this).hasClass(opts.nextCls)) {
var index = parseInt($obj.find('.' + opts.activeCls).text()) + 1;
} else if ($(this).hasClass(opts.prevCls)) {
var index = parseInt($obj.find('.' + opts.activeCls).text()) - 1;
} else if ($(this).hasClass(opts.jumpBtnCls)) {
if ($obj.find('.' + opts.jumpIptCls).val() !== '') {
var index = parseInt($obj.find('.' + opts.jumpIptCls).val());
} else {
return;
}
} else {
var index = parseInt($(this).data('page'));
}
self.filling(index);
typeof opts.callback === 'function' && opts.callback(self);
});
//输入跳转的页码
$obj.on('input propertychange', '.' + opts.jumpIptCls, function () {
var $this = $(this);
var val = $this.val();
var reg = /[^\d]/g;
if (reg.test(val)) {
$this.val(val.replace(reg, ''));
}
(parseInt(val) > pageCount) && $this.val(pageCount);
if (parseInt(val) === 0) {//最小值为1
$this.val(1);
}
});
//回车跳转指定页码
$document.keydown(function (e) {
var self = this;
if (e.keyCode == 13 && $obj.find('.' + opts.jumpIptCls).val()) {
var index = parseInt($obj.find('.' + opts.jumpIptCls).val());
GoPage(index);
//self.filling(index);
//typeof opts.callback === 'function' && opts.callback(self);
}
});
};
//初始化
this.init = function () {
this.filling(opts.current);
this.eventBind();
};
this.init();
};
$.fn.pagination = function (parameter, callback) {
if (typeof parameter == 'function') {//重载
callback = parameter;
parameter = {};
} else {
parameter = parameter || {};
callback = callback || function () { };
}
var options = $.extend({}, defaults, parameter);
return this.each(function () {
var pagination = new Pagination(this, options);
callback(pagination);
});
};
})(jQuery, window, document);

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment implémenter un tableau de requêtes AJAX

Comment implémenter une requête de file d'attente AJAX (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!