How to use string functions in JQuery?

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="MsoNormal" style="background: white; line-height: 14.4pt;"> <b style="line-height: 13.5pt;"><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">Description:</span></u></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Welcome to <b>Jqueryjohn.com</b>.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">In this article, i am going to explain about jquery string functions and their usage.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">String function is used to manipulate string objects.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">1. <u>charAt(index):<o:p></o:p></u></span></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">This method is used to return the character at the specified index. The index starts from 0.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> string = <span style="color: maroon;">"Jqueryjohn.com"</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">alert(string.charAt(5));<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">The above code will return ‘<b>y</b>’. <o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">2. <u>charCodeAt(index):</u><o:p></o:p></span></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">This method is used to return the Unicode character at the specified index. The index starts from 0.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> string = <span style="color: maroon;">"Jqueryjohn.com"</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">alert(string.charCodeAt(5));<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">The above code will return <b>121</b>. (Unicode character for ‘y’ is 121)<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">3. <u>Concat(str1,str2,.. strN):</u><o:p></o:p></span></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">This method is used to join two or more strings and it will not change the original string. It will return the copy the joined values.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> string1 = <span style="color: maroon;">"www."</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> string2 = <span style="color: maroon;">"Jqueryjohn"</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> string3 = <span style="color: maroon;">".com"</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">alert(string1.concat(string2, string3));<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">The above code will return ‘<b>www.jqueryjohn.com</b>’.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">4. <u>indexOf(searchValue,[start]):</u><o:p></o:p></span></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">This method is used to find the first occurance of the specific value in the string. If the searchvalue is not found, it will return -1.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> string1 = <span style="color: maroon;">"jqueryjohn"</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">alert(string1.indexOf(<span style="color: maroon;">'j'</span>,2));<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">The above code will search from the second position and returns <b>6</b>.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">5. <u>lastIndexOf(searchValue,[start]):</u><o:p></o:p></span></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">This method is used to find the last occurance of the specific value in the string. If the searchvalue is not found, it will return -1.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> string1 = <span style="color: maroon;">"jqueryjohn"</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">alert(string1.lastIndexOf(<span style="color: maroon;">'j'</span>));<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">The above code will return <b>6</b>.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">6. <u>substr(start, count):</u><o:p></o:p></span></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">This method is used to extract string from the start point to the specified count. It will not change the original string.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> string1 = <span style="color: maroon;">"jqueryjohn"</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">alert(string1.substr(1,5));<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">The above code will return ‘<b>query</b>’. <o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">7. <u>substring(start, end):</u><o:p></o:p></span></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">This method is used to extract string between the start and end places. It will not change the original string. <o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Difference between substr() and substring() are, substring will not return the end character.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> string1 = <span style="color: maroon;">"jqueryjohn"</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">alert(string1.substr(1,5));<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">The above code returns the character ‘<b>quer</b>’. <o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">8. <u>match(expression):</u><o:p></o:p></span></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">This method is used to searches a string for the match against the specified expression and returns the matched values. If no match found, it will return null.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">$(<span style="color: maroon;">"#btnmatch"</span>).click(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">     <span style="color: blue;">var</span> string1 = <span style="color: maroon;">"jqueryjohn"</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">     <span style="color: blue;">var</span> string2 = string1.match(<span style="color: maroon;">"john"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">     alert(string2);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">});<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">The above code searches for the matches and returns the matched values.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">9. <u>search(searchValue):</u><o:p></o:p></span></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">This method is used to searches a string against the specified value and returns the position of the matched values. If no match found, it will return -1.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">$(<span style="color: maroon;">"#btnmatch"</span>).click(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">     <span style="color: blue;">var</span> string1 = <span style="color: maroon;">"jqueryjohn"</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">     <span style="color: blue;">var</span> string2 = string1.match(<span style="color: maroon;">"john"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">     alert(string2);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">});<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">The above code searches against the specified value and returns ‘<b>6’</b> (position of the matched values).<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">10. <u>replace(searchValue,replacementValue):</u><o:p></o:p></span></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">replace() method used to replace the existing values to the new values. It will not affect the original string and it just copies the replaced values to the new variables.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> string1 = <span style="color: maroon;">"jqueryjohn"</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> string2 = string1.replace(<span style="color: maroon;">"john"</span>,<span style="color: maroon;">"john.com"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">alert(string2);<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">The above code searches the word “john” and replace with “john.com”. It returns <o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">‘<b>jqueryjohn.com’<o:p></o:p></b></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;"> </span></b><b style="line-height: 13.5pt;"><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">11. <u>Split(separator,limit):</u></span></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <a href="http://www.jqueryjohn.com/2014/02/how-to-split-string-using-jquery-split-method.html"><b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">split()</span></b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"> </span></a><span style="font-family: Verdana, sans-serif; font-size: 10pt;">method divide a string in smaller parts.</span><span style="font-family: Verdana, sans-serif; font-size: 9pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <br /></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: Verdana, sans-serif; font-size: 10pt;">This method used to split a string into an array.</span><span style="font-family: Verdana, sans-serif; font-size: 9pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <br /></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: Verdana, sans-serif; font-size: 10pt;">Split(‘’) – if we pass empty string in split method, it will split each character into an array.</span><span style="font-family: Verdana, sans-serif; font-size: 9pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <br /></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: Verdana, sans-serif; font-size: 10pt;">Split(‘ ‘) – if we pass blank space in split method, it will split each individual word into an array.</span><span style="font-family: Verdana, sans-serif; font-size: 9pt;"><o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> text = <span style="color: maroon;">"www.jqueryjohn.com"</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> splitText = text.split(<span style="color: maroon;">'.'</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">for</span><span style="font-family: Consolas; font-size: 9.5pt;"> (<span style="color: blue;">var</span> i = 0; i < splitText.length; i++) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">     alert(splitText[i]);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">}<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">The above code returns an array with three values as www, jquery, john.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">To learn more about <b>split()</b> method, </span><a href="http://www.jqueryjohn.com/2014/02/how-to-split-string-using-jquery-split-method.html"><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">click here</span></a><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">12. <u>slice(start, end):</u><o:p></o:p></span></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">This method is used to extract string between the start and end places. It will not change the original string.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> string1 = <span style="color: maroon;">"jqueryjohn"</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">alert(string1.slice(1,5));<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">The above code returns the character ‘<b>quer</b>’. <o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;"> </span><b style="line-height: 13.5pt;"><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt;">13. <u>toLowerCase()</u></span></b><u style="line-height: 13.5pt;"><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt;">:</span></u></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div class="MsoNormal" style="line-height: 14.4pt; margin-bottom: .0001pt; margin-bottom: 0in;"> <a href="http://www.jqueryjohn.com/2014/01/convert-lowercase-string-to-uppercase-using-jquery.html"><b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">toLowerCase()</span></b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"> </span></a><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">method is used to convert a string into lowercase.</span><span style="color: #333333; font-family: "Trebuchet MS","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="line-height: 14.4pt; margin-bottom: .0001pt; margin-bottom: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> string1 = <span style="color: maroon;">"JQUERYJOHN"</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">alert(string1.toLowerCase());<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">The above code returns “<b>jqueryjohn</b>”.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;"> </span><span style="font-family: Verdana, sans-serif; font-size: 10pt; line-height: 13.5pt;"> </span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <b><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt;">14. <u>toUpperCase()</u></span></b><u><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt;">:</span></u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;"><o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div class="MsoNormal" style="line-height: 14.4pt; margin-bottom: .0001pt; margin-bottom: 0in;"> <a href="http://www.jqueryjohn.com/2014/01/convert-lowercase-string-to-uppercase-using-jquery.html"><b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">toUppercase</span></b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"> </span></a><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">method is used to convert a string into uppercase.</span><span style="color: #333333; font-family: "Trebuchet MS","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="line-height: 14.4pt; margin-bottom: .0001pt; margin-bottom: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> string1 = <span style="color: maroon;">"jqueryjohn"</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">alert(string1.toUpperCase());<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">The above code returns “<b>JQUERYJOHN</b>”.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <u style="line-height: 13.5pt;"><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Jquery string functions, javascript string functions, string functions in jquery, javascript,  jquery string manipulation functions, string functions in jquery examples.</span></u></div> </div>

How to use string functions in JQuery?

Description: Welcome to Jqueryjohn.com . In this article, i am going to explain about jquery string functions and their usage. ...

Read more »

How to read and get JSON data using Jquery?

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">Description:<o:p></o:p></span></u></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Welcome to <b>Jqueryjohn.com</b>.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">In this article, I will explain </span><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">how to read and get JSON data </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">using </span><a href="http://www.jqueryjohn.com/"><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Jquery</span></a><span class="MsoHyperlink"><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;"> </span></span><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">and AJAX</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">.  <o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">JSON is nothing but text format that is easy to read and write. It’s like XML, fast and easy to parse.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">JSON is lightweight text interchange format, smaller than XML.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">When the document is ready, use AJAX request to read and Get the JSON values.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: Verdana, sans-serif; font-size: 10pt; line-height: 13.5pt;">Specify type as ‘</span><b style="font-family: Verdana, sans-serif; font-size: 10pt; line-height: 13.5pt;">POST</b><span style="font-family: Verdana, sans-serif; font-size: 10pt; line-height: 13.5pt;">’ and datatype as ‘</span><b style="font-family: Verdana, sans-serif; font-size: 10pt; line-height: 13.5pt;">json</b><span style="font-family: Verdana, sans-serif; font-size: 10pt; line-height: 13.5pt;">’.</span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Success parameter takes JSON data. <o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">success: <span style="color: blue;">function</span> (response) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">var</span> jsonval = eval(<span style="color: maroon;">'('</span> + response.d + <span style="color: maroon;">')'</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">for</span> (<span style="color: blue;">var</span> i = 0; i < jsonval.length; i++) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">               <span style="color: blue;">var</span> city = jsonval[i].City_Name;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">}<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: Verdana, sans-serif; font-size: 13px;">In the below example, I am converting dataset values into JSON.</span><br /> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;"><br /></span></u></b> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">Example program:<o:p></o:p></span></u></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">xmlns</span><span style="color: blue;">="http://www.w3.org/1999/xhtml"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">id</span><span style="color: blue;">="Head1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">title</span><span style="color: blue;">></</span><span style="color: maroon;">title</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"</span> <span style="color: red;">src</span><span style="color: blue;">="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        $(document).ready(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#btnReadGetJson'</span>).click(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                $.ajax({<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    type: <span style="color: maroon;">"POST"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    url: <span style="color: maroon;">"ReadXml.aspx/GetJsonData"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    contentType: <span style="color: maroon;">"application/json; charset=utf-8"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    dataType: <span style="color: maroon;">"json"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    success: <span style="color: blue;">function</span> (response) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        $(<span style="color: maroon;">"#divArea"</span>).html(<span style="color: maroon;">"<b><u>Cities retreived from the database are</u></b><br />"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;">var</span> city = <span style="color: maroon;">""</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;">var</span> jsonval = eval(<span style="color: maroon;">'('</span> + response.d + <span style="color: maroon;">')'</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;">var</span> citylength = jsonval.length;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;">if</span> (citylength > 0) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                            <span style="color: blue;">for</span> (<span style="color: blue;">var</span> i = 0; i < citylength; i++) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                                <span style="color: blue;">var</span> city = jsonval[i].City_Name;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                                $(<span style="color: maroon;">"#divArea"</span>).append(<span style="color: maroon;">'<li>'</span> + city + <span style="color: maroon;">'<li>'</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                            }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    },<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    error: <span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        alert(<span style="color: maroon;">"Failure"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">return</span> <span style="color: blue;">false</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">form</span> <span style="color: red;">id</span><span style="color: blue;">="form1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">div</span> <span style="color: red;">id</span><span style="color: blue;">="divArea"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Button</span> <span style="color: red;">ID</span><span style="color: blue;">="btnReadGetJson"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Read & Get JSON Data"</span> <span style="color: blue;">/></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">br</span> <span style="color: blue;">/></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">form</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">><o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Code behind:<o:p></o:p></span></u></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;"> [System.Web.Services.<span style="color: #2b91af;">WebMethod</span>]<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: blue;">public</span> <span style="color: blue;">static</span> <span style="color: blue;">string</span> GetJsonData()<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">       <span style="color: #2b91af;">SqlConnection</span> con = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlConnection</span>(<span style="color: #a31515;">"Data Source=192.169.1.151;Initial Catalog=Example;User ID=sa;Password=welcome3#;"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">       con.Open();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">       <span style="color: #2b91af;">SqlCommand</span> cmd = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlCommand</span>(<span style="color: #a31515;">"select City_Name from City"</span>, con);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">       <span style="color: #2b91af;">SqlDataAdapter</span> da = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlDataAdapter</span>(cmd);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">       <span style="color: #2b91af;">DataTable</span> ds = <span style="color: blue;">new</span> <span style="color: #2b91af;">DataTable</span>();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">       da.Fill(ds);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">       <span style="color: blue;">string</span> obj = GetJson(ds);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">       <span style="color: blue;">return</span> obj;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <br /></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">public</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: blue;">static</span> <span style="color: blue;">string</span> GetJson(<span style="color: #2b91af;">DataTable</span> dt)<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">{<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in; text-indent: 0.5in;"> <span style="font-family: Consolas; font-size: 9.5pt;">System.Web.Script.Serialization.<span style="color: #2b91af;">JavaScriptSerializer</span> serializer = <span style="color: blue;">new</span> System.Web.Script.Serialization.<span style="color: #2b91af;">JavaScriptSerializer</span>();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in; text-indent: 0.5in;"> <span style="color: #2b91af; font-family: Consolas; font-size: 9.5pt;">List</span><span style="font-family: Consolas; font-size: 9.5pt;"><<span style="color: #2b91af;">Dictionary</span><<span style="color: blue;">string</span>, <span style="color: blue;">object</span>>> rows = <span style="color: blue;">new</span> <span style="color: #2b91af;">List</span><<span style="color: #2b91af;">Dictionary</span><<span style="color: blue;">string</span>, <span style="color: blue;">object</span>>>();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in; text-indent: 0.5in;"> <span style="color: #2b91af; font-family: Consolas; font-size: 9.5pt;">Dictionary</span><span style="font-family: Consolas; font-size: 9.5pt;"><<span style="color: blue;">string</span>, <span style="color: blue;">object</span>> row = <span style="color: blue;">null</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in; text-indent: 0.5in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">foreach</span><span style="font-family: Consolas; font-size: 9.5pt;"> (<span style="color: #2b91af;">DataRow</span> dr <span style="color: blue;">in</span> dt.Rows)<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in; text-indent: 0.5in;"> <span style="font-family: Consolas; font-size: 9.5pt;">{<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                row = <span style="color: blue;">new</span> <span style="color: #2b91af;">Dictionary</span><<span style="color: blue;">string</span>, <span style="color: blue;">object</span>>();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">foreach</span> (<span style="color: #2b91af;">DataColumn</span> col <span style="color: blue;">in</span> dt.Columns)<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    row.Add(col.ColumnName.Trim(), dr[col]);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                rows.Add(row);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in; text-indent: 0.5in;"> <span style="font-family: Consolas; font-size: 9.5pt;">}<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in; text-indent: 0.5in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">return</span><span style="font-family: Consolas; font-size: 9.5pt;"> serializer.Serialize(rows);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">}<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">The above program reads the JSON data and updates with the page without postback via JQuery AJAX.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <br /> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <u><span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold; mso-themecolor: text1; mso-themetint: 191;">Read Json data using jquery, jquery to read Json data, how to read and parse Json data, load Json data using Jquery Ajax, retrieve data from Json using jquery<o:p></o:p></span></u></div> </div>

How to read and get JSON data using Jquery?

Description: Welcome to Jqueryjohn.com . In this article, I will explain how to read and get JSON data using Jquery and AJAX .   ...

Read more »

How to read and get XML file using Jquery?

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">Description:<o:p></o:p></span></u></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Welcome to <b>Jqueryjohn.com</b>.</span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;"><br /></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">In this article, I will explain </span><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">how to read and get XML data </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">using </span><a href="http://www.jqueryjohn.com/"><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Jquery</span></a><span class="MsoHyperlink"><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;"> </span></span><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">and AJAX</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">.  <o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Make sure the Xml file which we are going to read it’s free of errors.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">When the document is ready, use AJAX request to read and Get the values of the Xml data.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">$.ajax({<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">          type: <span style="color: maroon;">"GET"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">          url: <span style="color: maroon;">"JQueryJohn.xml"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">          dataType: <span style="color: maroon;">"xml"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">          success: <span style="color: blue;">function</span> (response) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">          },<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">          error: <span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">              alert(<span style="color: maroon;">"Failure"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">          }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">      });<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Specify type as ‘<b>GET</b>’ and datatype as ‘<b>xml</b>’.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Success parameter takes the data from the xml file. <o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">success: <span style="color: blue;">function</span> (response) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">         $(response).find(<span style="color: maroon;">'Tutorials'</span>).each(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">               <span style="color: blue;">var</span> lesson = $(<span style="color: blue;">this</span>).find(<span style="color: maroon;">'Lesson'</span>).text();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">               <span style="color: blue;">var</span> author = $(<span style="color: blue;">this</span>).find(<span style="color: maroon;">'Author'</span>).text();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">         });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">}<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Use <b>find()</b> method, read each node and get the values.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">Example program:<o:p></o:p></span></u></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">JQueryJohn.xml:<o:p></o:p></span></u></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><?</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">xml</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt;">version</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">=</span><span style="font-family: Consolas; font-size: 9.5pt;">"<span style="color: blue;">1.0</span>"<span style="color: blue;"> </span><span style="color: red;">encoding</span><span style="color: blue;">=</span>"<span style="color: blue;">utf-8</span>"<span style="color: blue;"> ?></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">JQueryJohn.com</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">       <</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">              <</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Lesson</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">Introduction and Fundamentals of JQuery<span style="color: blue;"></</span><span style="color: #a31515;">Lesson</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">              <</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Author</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">JQueryJohn<span style="color: blue;"></</span><span style="color: #a31515;">Author</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">       </</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">       <</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">              <</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Lesson</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">Selectors and Attributes in JQuery<span style="color: blue;"></</span><span style="color: #a31515;">Lesson</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">              <</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Author</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">JQueryJohn<span style="color: blue;"></</span><span style="color: #a31515;">Author</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">       </</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">       <</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">              <</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Lesson</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">Animation and Effects in JQuery<span style="color: blue;"></</span><span style="color: #a31515;">Lesson</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">              <</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Author</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">JQueryJohn<span style="color: blue;"></</span><span style="color: #a31515;">Author</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">       </</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">       <</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">              <</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Lesson</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">Events and Methods in JQuery<span style="color: blue;"></</span><span style="color: #a31515;">Lesson</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">              <</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Author</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">JQueryJohn<span style="color: blue;"></</span><span style="color: #a31515;">Author</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">       </</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">       <</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">              <</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Lesson</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">AJAX with JQuery<span style="color: blue;"></</span><span style="color: #a31515;">Lesson</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">              <</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Author</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">JQueryJohn<span style="color: blue;"></</span><span style="color: #a31515;">Author</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">       </</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">JQueryJohn.com</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">><o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">ReadXMLData.aspx<o:p></o:p></span></u></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">xmlns</span><span style="color: blue;">="http://www.w3.org/1999/xhtml"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">id</span><span style="color: blue;">="Head1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">title</span><span style="color: blue;">></</span><span style="color: maroon;">title</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"</span> <span style="color: red;">src</span><span style="color: blue;">="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        $(document).ready(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#btnReadGetXmlFile'</span>).click(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                $.ajax({<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    type: <span style="color: maroon;">"GET"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    url: <span style="color: maroon;">"JQueryJohn.xml"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    dataType: <span style="color: maroon;">"xml"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    success: <span style="color: blue;">function</span> (response) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        $(<span style="color: maroon;">"#divArea"</span>).html(<span style="color: maroon;">"<b><u>Jqueryjohn.com contains the following lessons with code snippets</u></b><br />"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        $(response).find(<span style="color: maroon;">'Tutorials'</span>).each(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                            <span style="color: blue;">var</span> lesson = $(<span style="color: blue;">this</span>).find(<span style="color: maroon;">'Lesson'</span>).text();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                            <span style="color: blue;">var</span> author = $(<span style="color: blue;">this</span>).find(<span style="color: maroon;">'Author'</span>).text();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                            $(<span style="color: maroon;">"#divArea"</span>).append(<span style="color: maroon;">'<li>'</span> + lesson + <span style="color: maroon;">" , Author: "</span> + author + <span style="color: maroon;">'<li>'</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    },<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    error: <span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        alert(<span style="color: maroon;">"Failure"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">return</span> <span style="color: blue;">false</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">form</span> <span style="color: red;">id</span><span style="color: blue;">="form1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">div</span> <span style="color: red;">id</span><span style="color: blue;">="divArea"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Button</span> <span style="color: red;">ID</span><span style="color: blue;">="btnReadGetXmlFile"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Read & Get XML File"</span> <span style="color: blue;">/></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">br</span> <span style="color: blue;">/></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">form</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">><o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">The above program reads the xml file and updates with the page without postback via JQuery AJAX.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <br /> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <u><span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold; mso-themecolor: text1; mso-themetint: 191;">Read xml file using jquery, jquery to read xml file, how to read and parse xml data, load xml file using Jquery Ajax, retrieve data from xml file using jquery<o:p></o:p></span></u></div> </div>

How to read and get XML file using Jquery?

Description: Welcome to Jqueryjohn.com . In this article, I will explain how to read and get XML data using Jquery and AJAX .   ...

Read more »