Résoudre le problème avant et arrière d'ajax basé sur Jquery.history
亚连
Libérer： 2018-05-24 15:09:33
original
1459 Les gens l'ont consulté
Cet article vous présente principalement la résolution du problème avant et arrière d'ajax basé sur Jquery.history, qui implique la connaissance de jquery avant et arrière. Le contenu de cet article est classique et a une grande valeur de référence. connaissance pertinente de jquery en avant et en arrière dans Script Home Le site Web est pour votre référence
Le contenu suivant concerne Jquery.history résolvant le problème en avant et en arrière d'ajax. Veuillez voir ci-dessous pour plus de détails.
La prémisse de cet article est basée sur le contexte, les problèmes de référencement ne seront donc pas abordés ici. Dans le même temps, le système de gestion basé sur le backend n'a pas besoin d'être collecté, il ne prendra donc pas en compte les situations rafraîchissantes comme la saisie directe de l'URL ! ! !
Le history.state en html5 est utilisé ici pour résoudre le problème.
Il existe déjà une solution open source pour js appelée pushState sur Internet. Voir pjax
pour plus de détails Cependant, cette solution ne convient pas à mon projet (projet backend), surtout la méthode main n'est pas suffisante.
J'utilise jquery.history.js Vous pouvez vous référer à ce history.js
<p id="ptxtinfo"><input id="txtinfo" type="text"/></p>
<br/>
<a funname="displayinfo" title="wxq" href="javascript:void(0);" class="apjax">提交</a>
<br/>
log:
<textarea id="log" style="width:100%;height:400px"></textarea>
</body>
</html>
<script>
///随机数
function guid() {
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
}
/// 回调的方法
function doCallback(fn, args) {
fn.apply(this, args);
}
///获取查询字符串
function GetQueryString() {
var result = "";
var url = location.href;
if(url.indexOf("?")>0){
result = url.substring(url.indexOf("?") + 1, url.length);
if (result != "") {
result = result + "&";
}
}
return "?" + result;
}
// 用来保存地址栏的参数，第一次页面加载的时候执行。 用来修改地址栏的时候，保留原始的参数
var globalQuerystr;
var golbalState = {
"globalPara": {},// js调用方法执行时用的全局js参数，
"globalControlValue": {},//js需要修改value的html组件 如文本 类似$(“#xxx”).val()
"globalControlHtml": {},// js需要修改内部html内容的html组件 类似 $(“#yy”).html()
"CallbackFunctions": "" // 回调的js方法 可以自己实现 ，用逗号分隔，一般是一个方法名
};
///全局变量的问题 globaPara 保存全局变量
///多个控件变化 但是不在一个容器内的问题 数组的方式 History.pushState({state:1,rand:Math.random(), "globaPara":globaPara, "valuecontrol":[{"txtuser":"1"},{"txtname":"2"}] "htmlcontrol":[{"htmltxt":"<b>hello</b>"},{"htmlcheckbox1":""}] },"title","?data=1"
//控件类型的问题 有的保存值就行 有的保存html更方便
(function (window, undefined) {
globalQuerystr = GetQueryString();
var
History = window.History, // Note: We are using a capital H instead of a lower h
State = History.getState(),
$log = $('#log');
console.info("页面加载完毕");
History.log('initial:', State.data, State.title, State.url);
//页面第一次加载的时候 State没有属性
History.Adapter.bind(window, 'statechange', function () { // Note: We are using statechange instead of popstate
// Log the State
var State = History.getState(); // Note: We are using History.getState() instead of event.state
golbalState = State.data;
if (golbalState) {
//修改控件的val值
if (golbalState.globalControlValue) {
for (var i = 0; i < golbalState.globalControlValue.length; i++) {
$("#" + golbalState.globalControlValue[i].controlid).val(golbalState.globalControlValue[i].controlvalue);
}
}
//修改全局变量
if (golbalState.globalPara) {
for (var i = 0; i < golbalState.globalPara.length; i++) {
eval("" + golbalState.globalPara[i].globalname + " =" + golbalState.globalPara[i].globalvalue + ";");
}
}
//修改控件的html
if (golbalState.globalControlHtml) {
for (var i = 0; i < golbalState.globalControlHtml.length; i++) {
$("#" + golbalState.globalControlHtml[i].controlid).html(golbalState.globalControlHtml[i].controlhtml);
}
}
//执行恢复参数后要执行的函数
if (golbalState.CallbackFunctions != "") {
doCallback(eval("" + golbalState.CallbackFunctions), null);
}
//清空函数
golbalState.CallbackFunctions = "";
}
History.log('statechange:', State.data, State.title, State.url);
});
})(window);
function displayinfo() {
console.info("index:" + History.getCurrentIndex);
//ajax方法，从服务器获取数据
$("#txtinfo").val("我爱" + $("#txtUser").val() + $("#txtId").val());
}
$(function () {
$(".apjax").on("click", function () {
golbalState.globalControlValue = [{"controlid": "txtUser", "controlvalue": $("#txtUser").val()}];
golbalState.CallbackFunctions = $(this).attr("funname");
History.pushState(golbalState, $(this).attr("title"), globalQuerystr + "rnd=" + guid());
});
})
</script>
Copier après la connexion
Citer d'abord les js de jquery et history.js
二
History.Adapter.bind(window, 'statechange', function () { Indique la surveillance des modifications lorsque vous cliquez en arrière, en avant ou sur la méthode js de l'historique. Exécuter une méthode personnalisée lorsqu'elle change.
History.pushState a trois paramètres : le titre de l'état, les paramètres de requête d'adresse personnalisés Cette méthode ajoute des données à l'enregistrement de l'historique et modifie la barre d'adresse<.> History.getState() Récupère les paramètres d'état de l'adresse actuelle
Trois processus
1 Récupère d'abord les paramètres de la barre d'adresse et enregistre-les
2 Liez la méthode click contenant la marque de la classe apjax. La marque peut être arbitraire, il peut s'agir d'un bouton de lien, etc.
Lorsque vous cliquez dessus, enregistrez l'état avant d'exécuter la méthode ajax. et enregistrez-le dans golbalState, dans lequel la méthode de rappel est appelée à partir de l'attribut funname de la balise, la valeur de title est obtenue à partir de l'attribut title de la balise, "globalPara": "globalControlValue": "globalControlHtml C'est Il est préférable d'attribuer la valeur dans la méthode ajax, telle que displayinfo
3 History.pushState est ajouté à l'enregistrement de l'historique et la barre d'adresse est modifiée
4 Lorsque vous y allez en arrière, exécutez la méthode dans History.Adapter.bind et récupérez d'abord le paramètre d'état
5 Modifiez les variables modifiées par js avant de revenir à la valeur d'origine, modifiez la valeur du composant html précédemment modifié à la valeur d'origine et restaurez le contenu html du composant html modifié à la valeur d'origine,
6 Réexécutez la méthode exécutée d'origine, c'est-à-dire la méthode enregistrée dans CallbackFunctions.
J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir. Articles connexes :
Utilisation des points de connaissances postMessage en HTML5 pour résoudre les problèmes inter-domaines POST en Ajax
À propos d'ajax objets Résumé des problèmes courants liés à la capitalisation des attributs, événements et méthodes communs
Comment résoudre l'échec de la session de requête 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!
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
