How to read txt with Ajax and display its content in pages

This time I will show you how Ajax reads txt and displays its content in pages. How Ajax reads txt and displays its content in pages. What are the precautions? . The following is a practical case. , let’s take a look.

The following will share with you the core code for ajax to read txt and display the txt content in pages. Without further ado, I will post the code directly.

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  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>
</p><p>
</p><p>
</p><p>
<span><a>科普IP</a> ></span>
</p><ol>
<li>@dr["Title"]</li>
<li>在线试读</li>
</ol>
<p></p>


<p>
<input>
</p><p>
</p><h3 id="dr-Title">@dr["Title"]</h3>
<p>
<span><em>1</em>/<em>0</em></span>
</p>
<input>
<p>
<nav>
<ul></ul>
<p></p>
</nav>
<!--底部翻页-->
</p>
<p>
<input>
<!--阅读控制-->
</p><p>
<a><span></span><em>上一页</em></a>
<a><span></span><em>下一页</em></a>
<a><span></span><em>回首页</em></a>
</p>



}
}
}

txtSome processing needs to be done when uploading the file, otherwise only txt in UTF8 format can be displayed

/// <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 = "" });
}
}

In addition, js is introduced on the home page of the page

<script></script>
<link>
/**
* 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 += '

' + opts.prevContent + '

'; } 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 ? '

' + home + '

...' : ''; } var start = current - opts.count, end = current + opts.count; ((start > 1 && current  pageCount - opts.count && current >= pageCount) && start++; for (; start = 1) { if (start != current) { html += '

' + start + '

'; } else { html += '

' + start + '

'; } } } if (current + opts.count = 1 && pageCount > opts.count) { var end = opts.coping && opts.endPage ? opts.endPage : pageCount; html += opts.coping ? '...

' + end + '

' : ''; } if (current ' + opts.nextContent + '' } else { $obj.find('.' + opts.nextCls) && $obj.find('.' + opts.nextCls).remove(); } html += opts.jump ? '' + opts.jumpBtn + '' : ''; $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);

I believe it After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to implement AJAX request array

How to implement AJAX queue request (with code)

The above is the detailed content of How to read txt with Ajax and display its content in pages. For more information, please follow other related articles on the PHP Chinese website!