Home  >  Article  >  Web Front-end  >  jQuery Learning Lesson 5 Ajax Instructions_jquery

jQuery Learning Lesson 5 Ajax Instructions_jquery

WBOY
WBOYOriginal
2016-05-16 18:27:14951browse

jQuery provides several ajax functions. They are similar but separated to process different types of data. The simplest is get(url, parameters, callback). This function initiates a GET request and passes the data returned by the server to the callback for processing. The following example implements the effect of initiating an ajax request when the mouse hovers over a hyperlink and returning more information about the hyperlink from the server. First look at the server-side code, create a new ajaxload.ashx, just as an example, get the value of the query parameter word, and return:

Copy code The code is as follows:

<%@ WebHandler Language="C#" Class="ajaxload" %>
using System;
using System.Web;
public class ajaxload : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string word = context.Request.Params["word"];
context.Response.Write(string.Format("

More intorduction of {0} is here....

",word));
}
public bool IsReusable {
get {
return false;
}
}
}

The front-end code is as follows:
Copy code The code is as follows:


Ajax Text</title> ; <BR><script type="text/javascript" src="jquery-1.3.2.js"></script> <br><script type="text/javascript"> <br> $(function() { <br>$('a').hover(function(event) { <br>$.get('ajaxload.ashx', { word: $(event.target).html() } , function(data) { <br>$('#result').html(data); <br>}); <br>}, function() { <br>$('#result').html( ""); <br>}); <br>}); <br></script> <br></head> <br><body> <br><a href="javascript: void(0)">China</a><br /> <br><a href="javascript:void(0)">USA</a><br /> <br> <a href="javascript:void(0)">Japan</a><br /> <br><a href="javascript:void(0)">China</a> <br /> <br><div id="result"> <br></div> <br></body> <br> </div> <br> <p> Slide the mouse over Japan and China in sequence. You can clearly see in firebug that two get requests were initiated. jquery encodes the parameters and passes them to the server. Ajax is so easy with the help of jQuery. </p> <p><a href="http://images.cnblogs.com/cnblogs_com/yinzixin/WindowsLiveWriter/jQueryAjax_AA66/image_2.png" target="_blank"></a></p> <p><img src="http://files.jb51.net/upload/201005/20100517224120972.png" border="0" alt="jQuery Learning Lesson 5 Ajax Instructions_jquery" ><br>In this example, the server returns an html fragment. The front-end job is to insert this html fragment into the page. In fact, the server can return data in any format. , just do the corresponding processing at the front desk. Among various data formats, JSON format is particularly commonly used. Regarding the JSON format itself, this article will not introduce much. Simply put, the JSON format is very similar to object literals in JavaScript. {} represents an object, [] represents an array. </p> <p>Let’s implement a three-level linkage drop-down menu. Let’s take a look at the final effect: </p> <p><a href="http://images.cnblogs.com/cnblogs_com/yinzixin/WindowsLiveWriter/jQueryAjax_AA66/image_4.png" target="_blank"></a><img src="http://files.jb51.net/upload/201005/20100517224132503.png" border="0" alt="jQuery Learning Lesson 5 Ajax Instructions_jquery" > </p> <p>This is a bundled product selector. First select the first attribute Game, then select Server, and finally select Amount. How the server side finds the appropriate data from the database and serializes it into JSON data is not the focus of this article. The server can respond to the following requests, and the returned data can also be seen. These are the typical formats of JSON: </p> <p><a href="http://images.cnblogs.com/cnblogs_com/yinzixin/WindowsLiveWriter/jQueryAjax_AA66/image_6.png" target="_blank"></a><img src="http://files.jb51.net/upload/201005/20100517224146211.png" border="0" alt="jQuery Learning Lesson 5 Ajax Instructions_jquery" > </p> <p>The first request returns a list of Game, the second request returns a list of Server, and the third request is a little more complicated and returns a lot of information. DisplayName is used to display in the list, and ID is the value of the list. , the rest are not used. For example: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="46318" class="copybut" id="copybut46318" onclick="doCopy('code46318')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code46318"> <br>Amount:<select name="SelectAmount" id="SelectAmount"><option value="45">10 Mil</option> <br><option value="46">20 Mil</option></select> <br> </div> <br>The following introduces the implementation of the front desk. The HTML code of the drop-down list box is as follows: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="85839" class="copybut" id="copybut85839" onclick="doCopy('code85839')"><u>Copy code </u></a></span> The code is as follows: </div> <div class="codebody" id="code85839"> <br><div id ="bannerLivechat_content"> <br><p> <br>Game:<select id="SelectGame"></select></p> <br><p> <br>Server: <select id="SelectServer"></select></p> <br><p> <br>Amount:<select id="SelectAmount" name="SelectAmount"></ select></p> <br><p> <br><asp:Button ID="ButtonFasyBuy" CssClass="btn_default" runat="server" Text="BuyNow" <BR>OnClick="ButtonFasyBuy_Click" /> <br></p> <br></div> <br> </div> <br>Write event handlers for the three drop-down lists. First load the Game list: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="67276" class="copybut" id="copybut67276" onclick="doCopy('code67276')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code67276"> <br>function LoadGame() { <br>$.getJSON('FastBuy.ashx' , function(data) { <br>var sel = $('#SelectGame')[0]; <br>sel.innerHTML = ""; <br>$.each(data, function(entryIndex, entry) { <br>var op = new Option(entry); <br>sel.options.add(op); <br>}); <br>$('#SelectGame')[0].selectedIndex = 0; <br> var game = $('#SelectGame').val(); <br>LoadServer(game); <br>}); <br>} <br> </div> <br>First clear the current list, $.each The function can iterate through each value in the first parameter and call the function of the second parameter in turn. And pass the value to the entry parameter. At this point jQuery has parsed the JSON data into a javascript object, here it is an array of strings. function LoadServer(game) { <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="49522" class="copybut" id="copybut49522" onclick="doCopy('code49522')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code49522"> <br>$.getJSON('FastBuy .ashx',{Game:game},function(data) { <br>var sel = $('#SelectServer')[0]; <br>sel.innerHTML = ""; <br>$.each(data , function(entryIndex, entry) { <br>var op = new Option(entry); <br>sel.options.add(op); <br>}); <br>$('#SelectServer')[0 ].selectedIndex = 0; <br>LoadAmount(game, $('#SelectServer').val()); <br>}); <br>} <br> </div> <br>The process of loading Server data is similar. <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="76226" class="copybut" id="copybut76226" onclick="doCopy('code76226')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code76226"> <br>function LoadAmount(game, server) { <br>$ .getJSON('FastBuy.ashx', {Game:game,Server:server}, function(data) { <br>var sel = $('#SelectAmount')[0]; <br>sel.innerHTML = "" ; <br>$.each(data, function(entryIndex, entry) { <br>var op = new Option(entry['AmountAttr'], entry['ID']); <br>sel.options.add( op); <br>}); <br>}); <br>} <br> </div> <br>Finally, the Amount is loaded. There is a slight difference here. The data in data is not a simple string at this time. Instead, it is an object with attributes. You can use an expression such as entry['ID'] to get the expression. In this example, entry[‘ID‘] is a simple number. Of course it can be another complex object or array, depending on the JSON data returned by the server. <br>With these preparations, we only need to register the processing function for the drop-down list in the ready function: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="96116" class="copybut" id="copybut96116" onclick="doCopy('code96116')"><u>Copy code</u></a></span> The code is as follows: </div> <div class="codebody" id="code96116"> <br>$(document).ready(function() { <br>$('#SelectServer').change(function() { <br>LoadAmount($('#SelectGame ').val(), $('#SelectServer').val()); <br>}); <br>$('#SelectGame').change(function() { <br>LoadServer($( '#SelectGame').val()); <br>}); <br>LoadGame(); <br>}); <br> </div> <br>At this point, a three-level linkage drop-down order is completed. <br>jQuery also has a $.post function, which is used the same as get, except that it initiates a post request. </div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement:</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article:<a class="dBlack" title="Javascript Object.extend_js object-oriented" href="http://m.php.cn/faq/21923.html">Javascript Object.extend_js object-oriented</a></span><span>Next article:<a class="dBlack" title="Javascript Object.extend_js object-oriented" href="http://m.php.cn/faq/21925.html">Javascript Object.extend_js object-oriented</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training,Help PHP learners grow quickly!</p></div><div class="footermid"><a href="http://m.php.cn/about/us.html">About us</a><a href="http://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="http://m.php.cn/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>