Ajax lit le txt et affiche le contenu du txt dans les pages

Cet article vous présente la fonction d'Ajax lisant le txt et paginant le contenu du txt. Il est très bon et a la valeur de référence et d'apprentissage de l'ajax. Les amis qui sont intéressés par l'ajax devraient y jeter un œil

. Ci-dessous, je partagerai 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 = $(&#39;#urlArticleContent&#39;).val();
var txt = &#39;&#39;;
var pageSize = @(ConfigurationManager.AppSettings["ArticlepageSize"]);
var page=5;
var pageCount = 0;
$(function() {
if(url!="")
{
txt = ($.ajax({ url: url, async: false })).responseText;
if (txt.indexOf(&#39;http://www.w3.org/1999/xhtml&#39;)==-1) {
pageCount = Math.ceil(txt.length / pageSize);
$("#PageCount").html(pageCount);
$(&#39;#word&#39;).html(TransferString(txt.substring(0, pageSize)));
$(&#39;#demo&#39;).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 = $(&#39;#goPage&#39;).val();
if (pageIndexStr==undefined) {
return false;
}
pageIndexStr = pageIndexStr.trim();
var pageIndex = parseInt(pageIndexStr);
}
$(&#39;#page&#39;+pageIndex).siblings().removeClass(&#39;active&#39;);
$(&#39;#page&#39;+pageIndex).addClass(&#39;active&#39;);
if (pageIndex==1) {
if(!$(&#39;#backClick&#39;).hasClass(&#39;disabled&#39;)) {
$(&#39;#backClick&#39;).addClass(&#39;disabled&#39;);
}
} else {
$(&#39;#backClick&#39;).removeClass(&#39;disabled&#39;);
}
if (pageIndex == pageCount) {
if(!$(&#39;#nextClick&#39;).hasClass(&#39;disabled&#39;)) {
$(&#39;#nextClick&#39;).addClass(&#39;disabled&#39;);
}
} else {
$(&#39;#nextClick&#39;).removeClass(&#39;disabled&#39;);
}
var pageTxt = txt.substring((pageIndex - 1) * pageSize, pageIndex * pageSize);
$(&#39;#word&#39;).html(TransferString(pageTxt));
$(&#39;html, body&#39;).animate({
&#39;scrollTop&#39;: 0
}, 0);
$("#pageCurrent").html(pageIndex);
}
function PageGo(){ if($(&#39;.jump-ipt&#39;).val()!=&#39;&#39;){
GoPage($(&#39;.jump-ipt&#39;).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>
}
}
}

Certains traitements doivent être effectués lors du téléchargement de fichiers txt, sinon seuls les txt au format UTF8 peuvent être affichés

/// <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 introduit 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: &#39;prev&#39;, //上一页class
nextCls: &#39;next&#39;, //下一页class
prevContent: &#39;上一页&#39;, //上一页内容
nextContent: &#39;下一页&#39;, //下一页内容
activeCls: &#39;active&#39;, //当前页选中状态
coping: false, //首页和尾页
homePage: &#39;&#39;, //首页节点内容
endPage: &#39;&#39;, //尾页节点内容
count: 5, //当前页前后分页个数
jump: true, //跳转到指定页数
jumpIptCls: &#39;jump-ipt&#39;, //文本框内容
jumpBtnCls: &#39;jump-btn&#39;, //跳转按钮
jumpBtn: &#39;跳转&#39;, //跳转按钮文本
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 = &#39;&#39;;
current = index || opts.current;//当前页码
var pageCount = this.getTotalPage();
if (current > 1) {//上一页
html += &#39;<li onclick=GoPage(&#39; + (current - 1) + &#39;)><a href="javascript:;" class="&#39; + opts.prevCls + &#39;">&#39; + opts.prevContent + &#39;</a></li>&#39;;
} else {
$obj.find(&#39;.&#39; + opts.prevCls) && $obj.find(&#39;.&#39; + opts.prevCls).remove();
}
if (current >= opts.count * 2 && current != 1 && pageCount != opts.count) {
var home = opts.coping && opts.homePage ? opts.homePage : &#39;1&#39;;
html += opts.coping ? &#39;<li onclick=GoPage(&#39; + home + &#39;)><a href="javascript:;" data-page="1">&#39; + home + &#39;</a></li><span>...</span>&#39; : &#39;&#39;;
}
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 += &#39;<li onclick=GoPage(&#39; + start + &#39;)><a href="javascript:;" data-page="&#39; + start + &#39;">&#39; + start + &#39;</a></li>&#39;;
} else {
html += &#39;<li class="&#39; + opts.activeCls + &#39;" onclick=GoPage(&#39; + start + &#39;)><a href="javascript:;"><span>&#39; + start + &#39;</span></a></li>&#39;;
}
}
}
if (current + opts.count < pageCount && current >= 1 && pageCount > opts.count) {
var end = opts.coping && opts.endPage ? opts.endPage : pageCount;
html += opts.coping ? &#39;<span>...</span><li onclick=GoPage(&#39; + pageCount + &#39;)><a href="javascript:;" data-page="&#39; + pageCount + &#39;">&#39; + end + &#39;</a></li>&#39; : &#39;&#39;;
}
if (current < pageCount) {//下一页
html += &#39;<li onclick=GoPage(&#39; + (current + 1) + &#39;)><a href="javascript:;" class="&#39; + opts.nextCls + &#39;">&#39; + opts.nextContent + &#39;</a></li>&#39;
} else {
$obj.find(&#39;.&#39; + opts.nextCls) && $obj.find(&#39;.&#39; + opts.nextCls).remove();
}
html += opts.jump ? &#39;<input type="text" class="&#39; + opts.jumpIptCls + &#39;"><a href="javascript:;" onclick=PageGo() class="&#39; + opts.jumpBtnCls + &#39;">&#39; + opts.jumpBtn + &#39;</a>&#39; : &#39;&#39;;
$obj.empty().html(html);
};
//绑定事件
this.eventBind = function () {
var self = this;
var pageCount = this.getTotalPage();//总页数
$obj.off().on(&#39;click&#39;, &#39;a&#39;, function () {
if ($(this).hasClass(opts.nextCls)) {
var index = parseInt($obj.find(&#39;.&#39; + opts.activeCls).text()) + 1;
} else if ($(this).hasClass(opts.prevCls)) {
var index = parseInt($obj.find(&#39;.&#39; + opts.activeCls).text()) - 1;
} else if ($(this).hasClass(opts.jumpBtnCls)) {
if ($obj.find(&#39;.&#39; + opts.jumpIptCls).val() !== &#39;&#39;) {
var index = parseInt($obj.find(&#39;.&#39; + opts.jumpIptCls).val());
} else {
return;
}
} else {
var index = parseInt($(this).data(&#39;page&#39;));
}
self.filling(index);
typeof opts.callback === &#39;function&#39; && opts.callback(self);
});
//输入跳转的页码
$obj.on(&#39;input propertychange&#39;, &#39;.&#39; + opts.jumpIptCls, function () {
var $this = $(this);
var val = $this.val();
var reg = /[^\d]/g;
if (reg.test(val)) {
$this.val(val.replace(reg, &#39;&#39;));
}
(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(&#39;.&#39; + opts.jumpIptCls).val()) {
var index = parseInt($obj.find(&#39;.&#39; + opts.jumpIptCls).val());
GoPage(index);
//self.filling(index);
//typeof opts.callback === &#39;function&#39; && opts.callback(self);
}
});
};
//初始化
this.init = function () {
this.filling(opts.current);
this.eventBind();
};
this.init();
};
$.fn.pagination = function (parameter, callback) {
if (typeof parameter == &#39;function&#39;) {//重载
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);

Ce qui précède est l'Ajax introduit par l'éditeur pour lire le txt et afficher le contenu du txt dans les pages. J'espère que cela sera utile à tout le monde ! !

Recommandations associées :

Méthode d'implémentation de la fonction de vérification simple en temps réel Ajax

Native JS implémente les requêtes ajax et ajax inter-domaines

JS implémente le contenu de réponse du flacon de requête inter-domaines Ajax

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!