ホームページ >ウェブフロントエンド >jsチュートリアル >jquery ajax_jqueryをベースにしたユーザー非リフレッシュログイン方法の詳細説明

jquery ajax_jqueryをベースにしたユーザー非リフレッシュログイン方法の詳細説明

WBOY
WBOYオリジナル
2016-05-16 17:54:021315ブラウズ

Ajax フレームワークは、Ajax 関数のモジュール実装を提供するコレクションです。Ajax フレームワークはさまざまな言語で実装できます (たとえば、Ajax は jquery の一部にすぎません)。 >例 1


$.ajax({
type:'post',/ /オプション get
url:'action.php',//これはデータを受け取る PHP プログラムです
data:'data='dsa',//渡されたデータPHP では、複数のパラメーターが &
dataType:'text' で接続されます。//サーバーから返されるデータ型は、XML、Json jsonp スクリプト HTML テキストなどです。
success:function(msg){
//これは、ajax 送信が成功した後の PHP プログラムです。返されたデータ処理関数は msg で、データ型は dataType パラメーターで定義されています。 ){
Ajax 送信失敗処理関数! >})


PHP action.php



コードをコピー

コードは次のとおりです。 echo 'www.jb51.net!' ?> 以下は、更新なしの jquery ajax ユーザー ログインの例です
例 2



コードをコピー


コードは次のとおりです:

<u></head> ;script src="./js/jquery.js" type=" text/javascript"></script> </u><script type="text/javascript"> </a>$(ドキュメント) ready(function(){//これは jQueryready です。C のようなものです。メイン言語のすべての操作が含まれています。</span>$("#button_login").mousedown(function(){ </div>login(); //ID が「button_login」のボタンをクリックすると、関数 login() がトリガーされます。<div class="codebody" id="code10594">}); var username = $("#username").val();//ボックスのユーザー名を取得します<br>varpassword = $("#password").val();//ボックスのパスワードを取得します<br> $.ajax({ //Ajax プロセス<br>type: "post", //ポスト モードでバックエンドと通信します<br>url: "login.php", //この PHP ページと通信します<br>dataType :'json', //php から返される値は JSON モードで解釈されます<br>data : 'username=' username '&password='password, //php に送信されるデータは 2 つの項目、つまり u と p が渡されます上記 <br>success: function(json){//php への呼び出しが成功した場合<br>//alert(json.username 'n' json.password); // 戻り値 (json.username) を警告します。 php <br>$('#result').html("Name:" json .username "<br/>Password:" json.password); // 事前に定義された結果ロケーターの位置に php の戻り値を表示します。 <BR>} <BR>}); <BR>//$ .post() メソッド: <BR>$('#test_post').mousedown(function (){ <BR>$.post( <BR>' login.php', <BR>{ <BR>ユーザー名:$( '#username').val(), <BR>パスワード:$('#password').val() <BR>}, <BR> function (data) //関数を返します <BR>{ <BR> var myjson=''; <BR>eval('myjson=' data ';'); <BR>$('#result');名前 1:" myjson.username "<br/>パスワード 1:" myjson.password); <BR>} <BR>); <BR>}); <BR>//$.get() メソッド: <BR>$('#test_get').mousedown(function ( ) <BR>{ <BR>$.get( <BR>'login.php', <BR>{ <BR>ユーザー名:$('#ユーザー名').val(), <BR>password:$(' #password').val() <BR>}, <BR>function(data) //関数を返します <BR>{ <BR>var myjson=' '; <BR>eval("myjson=" データ "; "); <BR>$('#result').html("名前 2:" myjson.ユーザー名 "<br/>パスワード 2:" myjson .password); <BR>}); <BR><BR><div id="結果" スタイル="background:orange;border:1px red red;width: 300px;height:200px;"></div> <br><form id="formtest" action="" method="post"> <br><p><span>名前を入力:</span><input type="text" name="username" id="username" /></p> p<span>パスワードを入力:<input type="text" name="password" id="password" /><br></form> ><button id="button_login">ajax submit</button> <br><button id="test_post">post submit</button> <br><button id="test_get"> submit</button> <br></body> <br><br><br> <br>php コード<br><br><br><br> <br>コードをコピー<br><br> <br> コードは次のとおりです: <br><br> <br><?php <BR>echo json_encode(array ('username'=>$_REQUEST[ 'ユーザー名'],'パスワード'=>$_REQUEST[ 'パスワード'])); <br>?><br>jquery ajax を使用する利点と欠点の分析 <br><br>利点 <br>小さく、圧縮コードは 20k 以上しかありません (非圧縮コードは 94k)。 <br> セレクターと DOM 操作の利便性: jQuery のセレクターと mootools の Element.Selectors.js、CSS セレクター、XPath セレクター (1.2 以降削除) <br> チェーン: 常に jQuery オブジェクトを返し、継続的に操作できます。 <br>ドキュメントは完全で使いやすく (各 API には完全な例があり、これは他のフレームワークにはないものです)、インターネット上には他にも多くのドキュメントや書籍があります。 <br>Google コードでも jQuery が使用されるなど、広く使用されています。 <br><br>jQuery を使用するサイト: http://docs.jquery.com/Sites_Using_jQuery <br>コア開発チームとコア担当者: John Resig など。 <br>簡潔で短い構文なので、覚えやすいです。 <br>拡張性: ユーザーが開発した多数のプラグインが利用可能 (http://jquery.com/plugins/) <br>jQuery UI (http://jquery.com/plugins/、jQuery ベース)ただし、Core jQuery は独立しています)、常に開発されています。 <br>フレンドリーでアクティブなコミュニティ: Google グループ: http://docs.jquery.com/Discussion <br>単一の addEvent などの代わりに、click などのイベント処理に便利なメソッドが多数あります。 <br><br><strong>デメリット</strong> <br>効率性とシンプルさを追求する設計思想のため、オブジェクト指向の拡張はありません。 Mootoolsとは設計思想が異なります。 <br>CSS セレクターは少し遅いです (ただし、速度は大幅に改善されました)</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明:</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事:<a class="dBlack" title="jQuery Ajax リクエスト ステート マネージャー package_jquery" href="https://m.php.cn/ja/faq/18971.html">jQuery Ajax リクエスト ステート マネージャー package_jquery</a></span><span>次の記事:<a class="dBlack" title="jQuery Ajax リクエスト ステート マネージャー package_jquery" href="https://m.php.cn/ja/faq/18973.html">jQuery Ajax リクエスト ステート マネージャー package_jquery</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="https://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ja/faq/1609.html" title="Bootstrap リスト グループ コンポーネントの詳細な分析" class="aBlack">Bootstrap リスト グループ コンポーネントの詳細な分析</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/1640.html" title="JavaScript関数のカリー化の詳細説明" class="aBlack">JavaScript関数のカリー化の詳細説明</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/1949.html" title="JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)" class="aBlack">JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/2248.html" title="Angularjs は WeChat UI (weui) を統合します" class="aBlack">Angularjs は WeChat UI (weui) を統合します</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/2351.html" title="JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル" class="aBlack">JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!</p></div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>