Ajax liest TXT und zeigt den TXT-Inhalt in Seiten an-js-Tutorial-php.cn

Dieser Artikel führt Sie in die Funktion von Ajax ein, TXT zu lesen und den TXT-Inhalt zu paginieren. Er ist sehr gut und hat den Wert, Ajax zu lernen. Freunde, die sich für Ajax interessieren, sollten einen Blick darauf werfen Im Folgenden werde ich Ihnen den Kerncode für Ajax zum Lesen von TXT und zum Anzeigen des TXT-Inhalts in Seiten mitteilen. Ohne weitere Umschweife werde ich den Code direkt veröffentlichen.

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>
}
}
}

Nach dem Login kopieren

Beim Hochladen von TXT-Dateien müssen einige Bearbeitungsschritte durchgeführt werden, da sonst nur TXT im UTF8-Format angezeigt werden kann

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

Nach dem Login kopieren

Außerdem wird js auf der Startseite der Seite eingeführt

<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);

Nach dem Login kopieren

Das Obige ist das vom Herausgeber eingeführte Ajax zum Lesen von TXT und zum Anzeigen des TXT-Inhalts in Seiten. Ich hoffe, es wird für alle hilfreich sein! !

Verwandte Empfehlungen:

Ajax einfache Methode zur Implementierung der Echtzeit-Überprüfungsfunktion

Native JS implementiert Ajax und Ajax-domänenübergreifende Anforderungen

JS implementiert domänenübergreifende Ajax-Request-Flask-Antwortinhalte

Das obige ist der detaillierte Inhalt vonAjax liest TXT und zeigt den TXT-Inhalt in Seiten an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!