首页 > 代码库 > slz-jquery的ajax
slz-jquery的ajax
1.打开jquery官网 http://jquery.com/
2.下载最新的jquery
3.将下载好的jquery放入项目中
4.
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
});
4.$()是工厂函数
5.函数的具体方法如下：
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 9 <script type="text/javascript"> 10 $(function(){ 11 $("#myId").click(function(){ 12 //获取一个DOM对象,DOM对象是不使用jquery的方法 13 var myid = document.getElementById(‘myId‘); 14 //myid.text("7777"); 15 //获取一个jquery对象 16 //$("#myId").text("456"); 17 //从DOM到jquery的转变,$()是生产jquery对象的工厂函数 18 $(myid).text("8888");//set里面的文本是8888 19 20 }); 21 }); 22 23 </script> 24 </head> 25 <body> 26 <div id="myId">123</div> 27 </body> 28 </html>
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 9 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 10 <script type="text/javascript"> 11 $(function(){ 12 //掌握$() 以及function(){} 结合 13 $("#a01").click(function(){ 14 alert(‘hi‘); 15 }); 16 //$() 是工厂函数，返回的是一个jQuery对象,括号里面的叫表达式 17 $("#a02").click(function(){ 18 //alert( $("#a02") ); 19 20 //document明显就是整个DOM的根节点 21 alert( $(document) ); 22 alert( $(document).text() ); 23 24 }); 25 26 //返回的就是对应这个id的jQuery对象, 27 //也是最常用的写法，必须掌握， 28 //类似DOM的getElementById返回单一的对象 29 $("#a03").click(function(){ 30 alert( $("#a03").text() ); 31 }); 32 33 //返回的就是对应这个class="c04"的jQuery对象, 34 //注意1、#要变成. 35 //2、返回的jQuery对象可以是多个的 36 $("#a04").click(function(){ 37 //alert( $(".c04") ); 38 alert( $(".c04").text() ); 39 alert( $(".c04").length ); 40 }); 41 42 //类似DOM的getElementsByTagName， 43 //通过标签名获得多个标签，CSS也经常这样使用的 44 $("#a05").click(function(){ 45 alert( $("a").text() ); 46 alert( $("a").length ); 47 }); 48 49 //选择器支持这样使用逗号分隔开， 50 //一次过获得多个对象 51 $("#a06").click(function(){ 52 alert( $("#a01,#a02,#a03").text() ); 53 alert( $("#a01,#a02,#a03").length ); 54 }); 55 //常见的函数text,它负责读取和修改一个元素的文本内容， 56 //不包含html内容 57 //text()既充当get，又可以充当set 58 $("#a07").click(function(){ 59 //alert( $("#a07").text() ); 60 //$("#a07").text(‘你好‘); 61 $("#a03,#a05,#a06").text(‘你好‘); 62 63 }); 64 65 $("#a08").click(function(){ 66 alert( $("#a08").text() ); 67 alert( $("#a08").html() ); 68 69 $("#a08a").html("<a href=http://www.mamicode.com/‘http://www.163.com‘>网易"); 70 }); 71 72 $("#a09").click(function(){ 73 alert( $("#b09").val() ); 74 $("#b09").val(‘2008-08-19‘) 75 }); 76 77 $("#a10").click(function(){ 78 $("#a10").css("border","3px dotted blue"); 79 //$("body").css("background","blue"); 80 81 var tmp = $("body").css("background-color"); 82 //代表蓝色 83 if( tmp=="rgb(0, 0, 255)" ){ 84 $("body").css("background","yellow"); 85 }else{ 86 $("body").css("background","blue"); 87 } 88 }); 89 90 91 $("#a11").click(function(){ 92 alert( $("#a11").attr(‘style‘) ); 93 $("#a11").attr(‘style‘,"background:green") 94 }); 95 96 $("#a12").click(function(){ 97 $(‘body‘).attr("style","padding:0;margin:0"); 98 }); 99 }); 100 101 </script> 102 103 </head> 104 105 <body> 106 <a href="">kkk</a><br> 107 <a href="">ttt</a> 108 <div id="a01">1.hi 事件event</div> 109 <div id="a02">2.$()工厂函数</div> 110 <div id="a03">3、选择器 #id</div> 111 <div id="a04" class="c04">4、选择器 .class</div> 112 <div class="c04">4、选择器 .class(配套演示1，只有class，没有id,没有注册事件)</div> 113 <div class="c04">4、选择器 .class(配套演示2，只有class，没有id,没有注册事件)</div> 114 <div id="a05">5、选择器 __tagName,例如DIV</div> 115 <div id="a06">6、选择器__选择多个元素</div> 116 <div id="a07">7、常见jQuery对象函数__text()</div> 117 <div id="a08">8、常见jQuery对象函数__html()<a href="#">test</a></div> 118 <div id="a08a">8.网页链接测试</div> 119 <div id="a09"> 120 9、常见jQuery对象函数__val() 121 <input id="b09" name="b09" value="val()函数测试"> 122 </div> 123 <div id="a10">10、常见jQuery对象函数__css()</div> 124 <div id="a11" style="background:yellow"> 125 11、常见jQuery对象函数attr() 126 </div> 127 <div id="a12">12、例子：全屏</div> 128 </body> 129 </html>
6.包装集。如下：
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 9 <script type="text/javascript"> 10 $(function(){ 11 //旧版本是.size()方法，新版本改为.length 12 $("#a01").click(function(){ 13 alert( $("div").length ); 14 }); 15 16 //index()返回对象所在包装集的下标，注意index(int)并不会返回对应坐标的对象 17 $("#a02").click(function(){ 18 var arrayList = $("div");//返回多个jQuery对象 19 var oneElement = $("#a02");//返回单一对象 20 alert ( arrayList.index( oneElement ) ); 21 //错误示范 22 alert(arrayList.index(1));//index(int)并不会返回对应坐标的对象 23 //错误示范的解释，如果想要指定要第2个元素 24 alert( arrayList[1] );//显示为[object HTMLDivElement] 25 alert( $(arrayList[1]) );//显示为[object Object] 26 //包装集包含里面的所有元素都只是DOM对象，而不是jquery对象 27 //加多一个$()就可以把DOM对象转换为jQuery对象 28 alert( $(arrayList[1]).text() ); 29 30 //alert( arrayList[1].text() ); 31 }); 32 33 $("#a03").click(function(){ 34 var arrayList = $("div"); 35 //get或者[]获出来的是DOM对象 36 alert( arrayList[2].innerText ); 37 alert( $(arrayList[2]).text() ); 38 39 alert( $(arrayList.get(2)).text() ); 40 }); 41 42 $("#a04").click(function(){ 43 //var btn=$("<input type=‘button‘ value=http://www.mamicode.com/‘确定‘>"); 44 45 var arrayList = $("div"); 46 /* 47 arrayList 48 .css("border","2px solid blue") 49 .add("<a href=http://www.mamicode.com/‘#‘>123").appendTo(document.body) 50 .css("background","yellow")*/ 51 $("body").append($("<a href=http://www.mamicode.com/‘#‘>").text("123")); 52 arrayList.css("background","yellow"); 53 }); 54 $("#a05").click(function(){ 55 $("a").clone().appendTo(document.body); 56 }); 57 $("#a06").click(function(){ 58 $("div").not("#a05,#a06").css("background","green"); 59 }); 60 $("#a07").click(function(){ 61 $("div").filter("#a05,#a06").css("background","green"); 62 }); 63 64 $("#a08").click(function(){ 65 $("div").slice(2,4).css("background","green"); 66 }); 67 68 $("#a09").click(function(){ 69 //alert ( $("#a01,#a02,#a03").text() ); 70 71 $("#a01,#a02,#a03").each(function(){ 72 alert( $(this).text() ); 73 74 }); 75 76 }); 77 78 79 }); 80 </script> 81 </head> 82 <body> 83 <div id="a01">1、包装集_length</div> 84 <div id="a02">2、包装集_index(obj)</div> 85 <div id="a03">3、包装集_get(index)或者[index]__会由jQuery对象变成DOM对象</div> 86 <div id="a04">4、包装集_add()</div> 87 <a href=‘#‘>我是一个链接</a> 88 <div id="a05">5、包装集_clone()、appendTo</div> 89 <div id="a06">6、包装集_not() [去掉]</div> 90 <div id="a07">7、包装集_filter() [仅保留]</div> 91 <div id="a08">8、包装集_slice(2,4) [取中间]</div> 92 <div id="a09">9、包装集_each() [遍历]</div> 93 </body> 94 </html>
7.层次选择器。如下：
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 9 <script type="text/javascript"> 10 $(function(){ 11 $("#a01").click(function(){ 12 //$(a b) 13 //form里面的input 14 $("form input") 15 .css("border","3px solid blue") 16 .css("background","yellow") 17 .val("ok"); 18 }); 19 20 $("#a02").click(function(){ 21 //$(a>b) 22 //form里面的input 23 $("form>input") 24 .css("border","3px solid blue") 25 .css("background","red") 26 .val("子元素"); 27 }); 28 29 //$(span+input) [同辈，注意返回的是input] 30 $("#a03").click(function(){ 31 $("span+input").css("background","yellow"); 32 }); 33 34 35 $("#a04").click(function(){ 36 $("span~input").css("background","yellow") 37 .hide(); 38 }); 39 40 }); 41 42 </script> 43 </head> 44 <body> 45 <form id="frm"> 46 <span>姓名：</span> 47 <input type="text" value="1"> 48 <div> 49 <input type="text" value="2"> 50 </div> 51 <input type="text" value="3"> 52 <input type="text" value="4"> 53 </form> 54 55 <input type="text" value="5"> 56 57 <div id="a01">层次选择器__$(a b) [后代元素，不管层次]</div> 58 <div id="a02">层次选择器__$(a>b) [子元素]</div> 59 <div id="a03"> 60 层次选择器__$(a+b) 61 [紧邻同辈,注意别看到a+b就认为返回内容是包含a和b2个，返回的是b] 62 </div> 63 <div id="a04"> 64 层次选择器__$(a~b) 65 [相邻同辈,同辈就行，不需要紧邻] 66 </div> 67 </body> 68 </html>
8.一个小的实验
ajax是及其重要的，这七个是常用的
第一种json数组
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 9 <script type="text/javascript"> 10 $(function(){ 11 var myClick=function(){ 12 var Name=$("#userName").val(); 13 var myData={userName:Name}; 14 var myFunction=function(result){ 15 alert(result); 16 }; 17 var errorFunction=function(XMLHttpRequest,textStatus){ 18 //alert("发生错误"); 19 if(XMLHttpRequest.status==404){ 20 alert("找不到服务器[404]"); 21 } 22 else if(XMLHttpRequest.status==500){ 23 alert("服务器忙，请稍后再试[500]"); 24 } 25 else{ 26 alert(XMLHttpRequest.status); 27 } 28 }; 29 /* 30 发送data的主要3种方式 31 1.json数组 32 2.url拼接 33 3.表单的序列化 serialize 34 */ 35 $.ajax({ 36 url:‘B‘, 37 type:‘GET‘, 38 data:myData, 39 dateType:‘text‘, 40 success:myFunction, 41 error:errorFunction, 42 timeout:1000 43 }) 44 }; 45 $("#img").click(myClick); 46 }); 47 </script> 48 </head> 49 <body> 50 <!-- 51 action="b.jsp" 52 不存在提交form了，所以action="b.jsp"已经没有存在的意义 53 --> 54 <form> 55 <input id="userName" name="userName" value="xiaoming"><br> 56 <!-- ajax方式submit框已经没有存在的意义 57 <input type="submit"> 58 --> 59 <img id="img" src="img/1.png"> 60 </form> 61 </body> 62 </html>
Servlet代码如下：
1 package test; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 6 import javax.servlet.ServletException; 7 import javax.servlet.annotation.WebServlet; 8 import javax.servlet.http.HttpServlet; 9 import javax.servlet.http.HttpServletRequest; 10 import javax.servlet.http.HttpServletResponse; 11 12 @WebServlet("/B") 13 public class B extends HttpServlet { 14 private static final long serialVersionUID = 1L; 15 16 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 17 System.out.println("doGet被访问了"); 18 //获取一个参数 19 String userName = request.getParameter("userName"); 20 String sex = request.getParameter("sex"); 21 //获取一个out对象，用于输出内容到客户端 22 PrintWriter out = response.getWriter(); 23 try { 24 Thread.sleep(0); 25 } catch (InterruptedException e) { 26 // TODO Auto-generated catch block 27 e.printStackTrace(); 28 } 29 out.print("I LOVE YOU "+userName+sex); 30 } 31 32 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 33 System.out.println("doPost被访问了"); 34 PrintWriter out = response.getWriter(); 35 out.print("I‘m a doPost method"); 36 } 37 38 }
第二种url拼接的方法
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 9 <script type="text/javascript"> 10 $(function(){ 11 var myClick=function(){ 12 //var Name=$("#userName").val(); 13 //var myData=http://www.mamicode.com/{userName:Name}; 14 var myFunction=function(result){ 15 alert(result); 16 }; 17 var errorFunction=function(XMLHttpRequest,textStatus){ 18 //alert("发生错误"); 19 if(XMLHttpRequest.status==404){ 20 alert("找不到服务器[404]"); 21 } 22 else if(XMLHttpRequest.status==500){ 23 alert("服务器忙，请稍后再试[500]"); 24 } 25 else{ 26 alert(XMLHttpRequest.status); 27 } 28 }; 29 /* 30 发送data的主要3种方式 31 1.json数组 32 2.url拼接 33 3.表单的序列化 serialize 34 */ 35 $.ajax({ 36 url:‘B?userName=‘+$("#userName").val(), 37 type:‘GET‘, 38 //data:myData, 39 dateType:‘text‘, 40 success:myFunction, 41 error:errorFunction, 42 timeout:2000 43 }) 44 }; 45 $("#img").click(myClick); 46 }); 47 </script> 48 </head> 49 <body> 50 <!-- 51 action="b.jsp" 52 不存在提交form了，所以action="b.jsp"已经没有存在的意义 53 --> 54 <form> 55 <input id="userName" name="userName" value="xiaoming"><br> 56 <!-- ajax方式submit框已经没有存在的意义 57 <input type="submit"> 58 --> 59 <img id="img" src="img/1.png"> 60 </form> 61 </body> 62 </html>
第三种表单的序列化
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 9 <script type="text/javascript"> 10 $(function(){ 11 var myClick=function(){ 12 var kk=$("#userName").serialize(); 13 var tt=$("#form1").serialize(); 14 //alert(tt); 15 var myFunction=function(result){ 16 alert(result); 17 }; 18 var errorFunction=function(XMLHttpRequest,textStatus){ 19 //alert("发生错误"); 20 if(XMLHttpRequest.status==404){ 21 alert("找不到服务器[404]"); 22 } 23 else if(XMLHttpRequest.status==500){ 24 alert("服务器忙，请稍后再试[500]"); 25 } 26 else{ 27 alert(XMLHttpRequest.status); 28 } 29 }; 30 /* 31 发送data的主要3种方式 32 1.json数组 33 2.url拼接 34 3.表单的序列化 serialize 35 */ 36 $.ajax({ 37 url:‘B‘, 38 type:‘GET‘, 39 data:tt, 40 dateType:‘text‘, 41 success:myFunction, 42 error:errorFunction, 43 timeout:2000 44 }) 45 }; 46 $("#img").click(myClick); 47 }); 48 </script> 49 </head> 50 <body> 51 <!-- 52 action="b.jsp" 53 不存在提交form了，所以action="b.jsp"已经没有存在的意义 54 --> 55 <form id="form1"> 56 <input id="userName" name="userName" value="xiaoming"><br> 57 <input id="sex" name="sex" value="man"><br> 58 <!-- ajax方式submit框已经没有存在的意义 59 <input type="submit"> 60 --> 61 <img id="img" src="img/1.png"> 62 </form> 63 64 65 66 67 </body> 68 </html>
slz-jquery的ajax
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。