単一のページアプリケーションを使用してルーティングを実装する方法jQueryを使用するだけで構築する -- javascript フィールド と jquery フィールド と google-analytics フィールド と single-page-application フィールド 関連 問題

How to implement routing with a single page application build solely using jQuery












4
vote

問題

日本語

ユーザーがTextField内の単語を入力して検索にhitsを押すと、 $.get() を使用して送信されます。データ(JSON)はサーバーからフェッチされ、次にUIが更新されます。

私がやりたいことはかなり簡単です:

1)フォームが送信されると、ブラウザのURLが更新する必要があります(<コード> search/zyx 、<コード> zyx のようなものです)。 2)ページがお気に入りに予約されているとき、またはページがロードする必要がある場所からリンクとしてリンクとしてクリックすると、テキストフィールド値は 'zyx'である必要があります。また、UIは zyx の検索結果を表示する必要があります。

これは私のアプリにとってGoogle Analyticsを使うことになります。そのため、行動を反映するためにURLが必要です。さらに戻るボタン履歴のような他の問題。これは、jQueryまたはjQuery上に構築されたいくつかの非常に軽いライブラリを使用してこの可能性があります。私はどこでも検索しました、そして私が見つけたすべての解決策はMVCフレームワークを使用していました。あるいは別の解決策は、この1つのようなテンプレートフレームワークを使用することでした。しかし私のアプリはこれらの解決策には単純すぎる方法です。

英語

Right now when the user inputs a word in the textfield and hits search, the form submits using $.get(). The data(JSON) is fetched from the server and then the UI is updated.

What I want to do is pretty simple:

1) When the form submits, the URL of the browser needs to update (something like search/zyx, zyx is what the user is searching for).

2) when the page is booked into favorites, or clicked as a link from somewhere the page needs to load and then the textfield value have to be 'zyx'. Also the UI needs to show search result of zyx.

This is important to my app because I will be using Google Analytics. So the URL is needed to reflect behaviour. Plus the other issue like back button history. Is this possible using just jQuery or some extremely light libraries build on jQuery. I have searched everywhere and all the solutions I found were using MVC frameworks. Or another solution was to use a templating framework like this one. However my app is way too simple for these solutions.

</div
           
     
     

回答リスト

6
 
vote

だから、あなたが必要とするアプローチはURLのハッシュ変更を聞き、これに基づいて現在のページを取得し、それをCointainerにレンダリングすることです。このようなもの:

<事前> <コード> <a href="#page2">Go to Page 2</a> <div class="page-container"></div> <script> $(window).on('hashchange',function(){ var page = window.location.hash; $.get('pages/'+page+'.html', function(pageContent){ $('.page-container').html(pageContent); }) }); </script>
 

So, the approach you you need is to listen to hash changes in the url and based on this get the current page and render it in a cointainer. Something like this:

<a href="#page2">Go to Page 2</a> <div class="page-container"></div> <script> $(window).on('hashchange',function(){    var page = window.location.hash;   $.get('pages/'+page+'.html', function(pageContent){      $('.page-container').html(pageContent);   })    }); </script> 
</div
 
 
0
 
vote

何らかの操作が行われたときにユーザーのURLを変更したい場合は、わかります。その他のトピックがあります。、そしてそれらは

を使用します。 <事前> <コード> window.location.replace(url)

それがあなたを助けることを願っています:)

 

If I understand you want to change the URL of the user when some actions are done. There is an other topic about it HERE, and they use

window.location.replace(url) 

Hope it helps you :)

</div
 
 
   
   
0
 
vote

皆さんありがとうございました。だから私は @Tulio Faria の回答と @Gabriele Mantovani の間の組み合わせを使用して終わりました。

  • URLから検索キーワードを取得する window.location.hash
  • USERを更新する history.pushState({id: 'query'}, '', 'some_url_string');
  • USED $(window).on('hashchange',function(){...}) ブラウザのバックボタンまたはフォワードボタンをクリックした場合
  • のどちらかをクリックした場合は、現在の検索キーワードのページをロードします。
 

Thank you every one. So I ended up using a combination between @Tulio Faria 's answer and @Gabriele Mantovani.

  • To get the search keyword from url I used window.location.hash
  • To update url used history.pushState({id: 'query'}, '', 'some_url_string');
  • Used $(window).on('hashchange',function(){...}) to load page of the current search keyword if either back or forward buttons of browser were clicked
</div
 
 
0
 
vote

Simple JQuery、JavaScriptベースのルーティング

<事前> <コード> <html> <head> <title>KCS Website australia</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <a href="#/about">About</a> | <a href="#/contact">Contact Us</a> <div class="page-container"></div> </body> <script> $(window).on("hashchange", function () { var page = window.location.hash; console.log(page.substring(2)); $.get("pages/" + page.substring(2) + ".html", function (pageContent) { $(".page-container").html(pageContent); }); }); </script> </html>
 

Simple jquery, javascript based routing.

<html>   <head>     <title>KCS Website australia</title>      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>   </head>   <body>     <a href="#/about">About</a> | <a href="#/contact">Contact Us</a>      <div class="page-container"></div>   </body>   <script>     $(window).on("hashchange", function () {       var page = window.location.hash;       console.log(page.substring(2));       $.get("pages/" + page.substring(2) + ".html", function (pageContent) {         $(".page-container").html(pageContent);       });     });   </script> </html> 
</div
 
 

関連する質問

13  シングルページアプリケーションと<form>要素  ( Single page applications and form elements ) 
単一のページアプリケーションのコンテキストで 99887766 要素を指定するのではなく、 <form> 要素を使用することの利点はまだありますか? <form> 要素の目的は、「フォーム」の提出がAjax呼び出しで行われていない場合は私にとっては意味があり...

3  OAuth2 - トークンの取得中のオプション要求のステータス401  ( Oauth2 status 401 on options request while retrieving token ) 
私たちのスタックは私たちのクライアント側のアプリとスプリングブーツとしてバックボーンをRESTful APIとして使用します。 ユーザ名とパスワードを提供するユーザとOAuth2を使用して基本認証を行おう。 要求を行うための認証とjQuery $ .ajaxメ...

0  どのように私のアプリケーションを整理する必要がありますか?  ( How should i organize my application ) 
現在、React / TypeScriptプロジェクトに取り組んでおり、ファイルを数多くのフォルダに分割しました。私のプロジェクトは、さまざまな処理方法を使用して、独立して独立したものを解決しているので、この構造に私のアプリケーションを分割しています。 <事前...

17  アップデートする単一のページアプリケーションを強制する  ( Forcing a single page application to update ) 
シングルページアプリの場合、サーバにデプロイされた更新がある場合に、リロードされるページやJavaScriptファイルを強制する方法はありますか? 1つの明らかな方法は、アプリの現在のバージョンがブラウザで実行されているかどうかを確認するために一部のサーバー...

6  NET CORE 2 SPAテンプレートを備えた  ( Net core 2 spa template with angular material ) 
角質材料を取得しようとしている、あるいは本当に3番手のコントロールを設定しようとしています。この新しいテンプレートでは、WebPackはTreShakableとNontreShakableに分割されています。さらに、App.Moduleはapp.module....

-1  Angularjs NgrouteはFirefoxで動作していません[二重]  ( Angularjs ngroute is not working in firefox ) 
この質問はすでにここで答えを持っています angularjs - ui.router firefoxを使用するときに機能しないとCroome v.49 [閉じた] ...

0  ターミナルでNPM RUN DEVコマンドを実行した後にSapperアプリケーションを実行できません  ( I cannot run my sapper application after running npm run dev command in the term ) 
端末で npm run dev コマンドを実行すると、次のようなエラーがあります。 あなたは問題になることができると思いますか?私はノードモジュールフォルダを削除して依存関係を再インストールしようとしましたが、それは私のために機能しないようです。 ありがとう ...

0  ノックアウトJS:ユーザーがテキストフィールドに貼り付けたときにビューモデルを更新しますか?  ( Knockoutjs update view model when a user copyn paste into a text field ) 
私は同じ質問をしています。knokoutjs:ユーザーがテキストフィールドにコピーした後にビューモデルを更新する方法?そして私は解決策を考えていました。それも私にも役立ちます。しかし、私はその解決策に問題があります。 ユーザーコピーして貼り付けすると、自動的に...

42  シングルページアプリケーション(ARIAなど)でのアクセシビリティ  ( Accessibility in single page applications aria etc ) 
スパ(AngularJS)をアクセス可能にするための最良のアプローチ(スクリーンリーダーなど)は何ですか? 私はARIA仕様の経験はほとんどありませんが、それがすべてのページアプリケーションですべての作業になるのだろうか。 開発時の一般的な落とし穴は何ですか?...

33  Google Analytics:1ページのアプリケーションでページを追跡する方法は?  ( Google analytics how to track pages in a single page application ) 
現在、 <コード> と<コード> は、速度を上げるためのリンク内の popState 。ただし、これは実際には real URLを変更しません。 Google Analytics 'のコード。 (URLの変更を表示しません)これに可能な解決策はありますか?...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有