Ajax (jquery) Study Notes

Last Update:2018-12-03 Source: Internet

Author: User

Tags getscript

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Link:

Http://www.ibm.com/developerworks/cn/web/wa-ajaxintro10/

Jar package required by servlet-packaging:

Http://download.csdn.net/detail/zhengsihan/5879285

Code:

Http://download.csdn.net/detail/zhengsihan/5879555

Servlet: (the most annoying is the package used in JSON, which has been packaged)

Package Org. minus. servlet; import Java. io. ioexception; import Java. io. printwriter; import Java. util. date; import javax. servlet. servletexception; import javax. servlet. annotation. webservlet; import javax. servlet. HTTP. httpservlet; import javax. servlet. HTTP. httpservletrequest; import javax. servlet. HTTP. httpservletresponse; import net. SF. JSON. jsonarray; import net. SF. JSON. jsonobject; @ webservlet (description = "for e-mail sending", urlpatterns = {"/mail. do "}) public class emailserv extends httpservlet {Private Static final long serialversionuid = 1l; Public emailserv () {} protected void doget (httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception {dopost (req, resp);} protected void dopost (httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception {system. out. println ("Enter servlet _" + new date (); resp. setcharacterencoding ("UTF-8"); resp. setcontenttype ("text/plain"); string name = req. getparameter ("name"); string age = req. getparameter ("Age"); system. out. println ("received name:" + name + ", age:" + age); jsonobject jobj = new jsonobject (); jsonarray ary = new jsonarray (); jsonobject member = NULL; // jobj. put ("memo", "hello"); // returns a single message // jobj. put ("spy", "Snowden"); For (INT I = 0; I <5; I ++) {member = new jsonobject (); member. put ("memo", "Hello _" + I); member. put ("spy", "Snow _" + I); ary. add (member);} jobj. put ("returns", Ary); printwriter PW = resp. getwriter (); PW. write (jobj. tostring (); PW. flush ();}}

JS events (jquery used ):

$ (Document ). ready (function () {$ ('# emailbtn '). click (function () {$ ('div '). load ('component/email-form.html ');}); $ (' # ajaxbtn '). click (function () {alert ('out'); $. ajax ({type: 'post', URL: 'mail. do ', cache: false, success: function (JSON) {}}) ;}; $ (' # getbtn '). click (function () {$. get ('mail. do ', {"name": "zsh", "Age": "18"}, function (data, status) {var returns = data. returns; var memo; var spy; For (VAR I = 0; I <returns. length; I ++) {memo = Returns [I]. memo; Spy = Returns [I]. spy; alert ('di' + (I + 1) + 'message:' + memo + '\ t' + spy );};}, 'json');}); $ ('# postbtn '). click (function () {$. post ('mail. do ', function (data) {alert (' $. if post succeeds ');});});});

Drop-item.html (drop-down menu element swap)

<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> 
$. Getscript

$ ('# DDD'). Click (function () {var $ newbtn = $ ("<input type = 'button 'id = 'test' value = 'click me! '/> "); // $ (' # Btns '). append ($ newbtn); $ (this ). after ($ newbtn); $. getscript ('js/DDD. js', function () {alert ('js loaded ');});});
$. Each

$ ('# Each '). click (function () {var $ btns =$ ('input'); $ btns. each (function (I, BTN) {// I is the array subscript, and BTN is each button. Note that BTN is not a jquery object, so the following code converts var $ BTN =$ (BTN); alert ($ BTN. Val ());});});

$. Jsonp + $. Ajax
Jsonp related information:
Http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
Http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/

$(document).ready(function(){$('#ajaxBtn').click(function(){//$.ajax({type:'POST',url:'mail.do',cache:false,success:function(json){}});//$.getJSON('mail.do',function(data){});$.ajax({type:'post',timeout:3000,async:false,url:'http://localhost:8080/ajaxtest/mail.do',data:{'name':'zsh','age':'28'},dataType:'JSONP',jsonp:'callback',jsonpCallback:'theHandler',success:function(data){alert(data);},error:function(){alert('error');}});});});
Servlet code

Protected void dopost (httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception {system. out. println (new date (); resp. setcharacterencoding ("UTF-8"); resp. setcontenttype ("text/JavaScript"); string output = req. getparameter ("Callback") + "(\ 'This is the data returned by jsonp \');"; printwriter PW = resp. getwriter (); PW. write (output); PW. flush ();}
$. Serialize

$. Serializearray

$. Param

. Extend

. On

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More