文章目录
jQuery
jQuery是js库
-
库:相当于java的工具类,库是存放东西的, jQuery是存放js代码的地方, 放的用js代码写的function
-
总述:jQuery 是一款跨主流浏览器的 JavaScript 库,封装了 JavaScript 相关方法调用,简化 JavaScript 对 HTML DOM 操作
-
官网地址: https://jquery.com/
- 官网的解释(了解就行):
- jQuery 是一个快速,小巧,功能丰富的 JavaScript 库。 它通过易于使用的 API 在大 量浏览器中运行,使得 HTML 文档遍历和操作,事件处理,动画和 Ajax 变得更加简单。 通 过多功能性和可扩展性的结合,jQuery 改变了数百万人编写 JavaScript 的方式。
- 官网的解释(了解就行):
jQuery的优点
(1)写少代码,做多事情【write less do more】
(2)免费,开源且轻量级的 js 库,容量很小
(3)兼容市面上主流浏览器,例如 IE,Firefox,Chrome
(4)能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果,也能提供异步 AJAX 功能
(5)文档手册很全,很详细
(6)成熟的插件可供选择,多种 js 组件,例如日历组件(点击按钮显示下来日期)
(7)出错后,有一定的提示信息
(8)不用再在 html 里面通过
- 例如:使用 JavaScript 定位 DOM 对象常用的三种方式:
(1)通过 ID 属性:document.getElementById()
(2)通过 class 属性:getElementsByClassName()
(3)通过标签名:document.getElementsByTagName()
-
上面代码可以看出 JavaScript 方法名太长了,大小写的组合太多了,编写代码效率,容易出 错。jQuery 分别使用**$(“#id”) , $(“.class 名”) , $(“标签名)** 封装了上面的 js 方法。
-
引入jQuery:
-
javascript">/* 1. $(document) , $是jQuery中的函数名称, document是函数的参数,作用是 document对象变成 jQuery函数库可以使用的对象。 2. ready:是jQuery中的函数, 是准备的意思, 当页面的dom对象加载成功后会执行ready函数的内容。 ready 相当于js中的onLoad事件 3. function()自定义的表示onLoad后要执行的功能。 4. 下面两种方法效果一致,第一种更标准,第二种更简化 */ $(document).ready(function(){ //自定义的功能代码 alert("Hello jQuery") }) $( function(){ //代码内容 alert("Hello JQuery 快捷方式") } )
jquery_61">dom对象和jquery对象
- dom对象,使用javascript的语法创建的对象叫做dom对象,也就是js对象。
javascript">var obj = document.getElementById("txt1");
// obj是dom对象,也叫做js对象
obj.value;
-
dom对象可以和jquery对象相互的转换。
-
为什么要进行dom和jquery的转换:目的是要使用对象的方法,或者方法。
当你的dom对象时,可以使用dom对象的属性或者方法, 如果你要想使用jquery提供的函数,必须是jquery对象才可以。
jquery_82">dom和jquery对象之间的转换
-
使用用 ( D O M 对象 ) 方式,可以 D O M 对象转换为 j Q u e r y 对象,转换为 j Q u e r y 对象才可以使用 j Q u e r y 中的提供的方法,操作 D O M 对象。一般情况下,在命名 j Q u e r y 对象时,为了与 D O M 对象进行区分, ∗ ∗ 习惯性的以 (DOM 对象) 方式,可以 DOM 对象转换为 jQuery 对象, 转换为 jQuery 对象才可以 使用 jQuery 中的提供的方法,操作 DOM 对象。一般情况下,在命名 jQuery 对象时,为了 与 DOM 对象进行区分,**习惯性的以 (DOM对象)方式,可以DOM对象转换为jQuery对象,转换为jQuery对象才可以使用jQuery中的提供的方法,操作DOM对象。一般情况下,在命名jQuery对象时,为了与DOM对象进行区分,∗∗习惯性的以 开头**。
-
jQuery 对象本身为数组对象,该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM 对象。所以有两种方式可以获取到 DOM 对象:get(0) 方式与下标[0]
-
dom -> jquery
-
<script type="text/javascript">javascript"> function btnClick(){ //获取dom对象 var obj = document.getElementById("btn"); //使用dom的value属性,获取值 alert("使用dom对象的属性="+obj.value) //把dom对象转jquery,使用jquery库中的函数 var jobj = $(obj); //调用jquery中的函数,获取value的值 alert( jobj.val() ) } </script> <body> <input type="button" id="btn" value="==我是按钮==" onclick="javascript language-javascript">btnClick()" /> </body>
-
jquery -> dom
-
<script type="text/javascript">javascript"> function btnClick(){ //使用jquery的语法,获取页面中的dom对象 //var obj = $("#txt")[0]; // 从数组中获取下标是0的dom对象 var obj = $("#txt").get(0);//从数组中获取下标是0的dom对象 //alert( obj.value) var num = obj.value; obj.value = num * num; } </script> <body> <div> <input type="button" value="计算平方" onclick="javascript language-javascript">btnClick()" /><br/> <input type="text" id="txt" value="整数" /> </div> </body>
-
选择器
就是一个字符串,用来定位dom对象的。定位了dom对象,就可以通过jquery的函数操作dom
常用的选择器:
? 1) id选择器, 语法: $(“
#
dom对象的id值”)
? 通过dom对象的id定位dom对象的。 通过id找对象, id在当前页面中是唯一值。
? 2) class选择器, 语法: $("
.
class样式名)
? class表示css中的样式, 使用样式的名称定位dom对象的。
? 3) 标签选择器, 语法: $(“标签名称”)
? 使用标签名称定位dom对象的
代码示例:
<style type="text/css">
/* 对所有div标签全局应用 */
div{
background: gray;
width: 200px;
height: 100px;
}
/* 自定义样式,仅对class="two"的标签生效 */
.two{
background: gold;
font-size: 20pt;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">javascript">
function fun1(){
//id选择器
var obj = $("#one");
//使用jquery中改变样式的函数
obj.css("background","red");
}
function fun2(){
//使用样式选择器
var obj = $(".two");
obj.css("background","yellow");
}
function fun3(){
//标签选择器
var obj = $("div"); //数组有3个对象
//jquery的操作都是操作数组中的全部成员.
//所以是给所有的div都设置的背景色
obj.css("background","blue");
}
function fun4(){
// 所有选择器,所有dom
var obj = $("*");
obj.css("background","green");
}
function fun5(){
var obj = $("#one,span");
//obj.css("background","red");
//obj是一个数组, 有两个成员, 1 是span dom对象
//$( obj[1] ) : jquery对象
// $( dom 对象) : 是把dom对象转为jquery对象, 之后就可以调用jquery的css函数了
$( obj[1] ).css("background","green");//就是span
}
document.getElementById("one"); //js的语法规则 ,value
$("#one"); //jquery语法
</script>
</head>
<body>
<div id="one">我是one的div</div><br/>
<div class="two">我是样式是two的div</div>
<br/>
<div>我是没有id,class的div</div>
<br/>
<span class="two">我是span标签</span>
<br/>
<input type="button" value="获取id是one的dom对象" onclick="javascript language-javascript">fun1()" />
<br/>
<input type="button" value="使用class样式获取dom对象" onclick="javascript language-javascript">fun2()" />
<br/>
<input type="button" value="使用标签选择器" onclick="javascript language-javascript">fun3()" />
<br/>
<input type="button" value="所有选择器" onclick="javascript language-javascript">fun4()"/>
<br/>
<input type="button" value="组合选择器" onclick="javascript language-javascript">fun5()"/>
</body>
-
所有选择器 语法:$(“*”) 选取页面中所有 DOM 对象。
-
组合选择器 组合选择器是多个被选对象间使用逗号分隔后形成的选择器,可以组合 id,class,标签名等。 语法:$(“id,class,标签名”)
表单选择器
使用标签的type属性值,定位dom对象的方式。
- 语法: $(“:type属性的值”)
- $(“:tr”): 不能用,tr 不是 input 标签
- 例如:
- $(“:text”)选取所有的单行文本框
- $(“:password”)选取所有的密码框
- $(“:radio”)选取所有的单选框
- $(“:checkbox”)选取所有的多选框
- $(“:file”)选取所有的上传按钮
<script type="text/javascript">javascript">
function fun1(){
//使用表单选择器 $(":type的值")
var obj = $(":text");
//获取value属性的值 val()是jquery中的函数, 读取value属性值
alert( obj.val());
}
function fun2() {
//定位radio
var obj = $(":radio");//数组,目前是两个对象 man ,woman
//循环数组,数组中的成员是 dom对象,可以dom的属性或者函数
for(var i=0;i<obj.length;i++){
//从数组值获取成员,使用下标的方式
var dom = obj[i];
//使用dom对象的属性,获取value值
alert(dom.value)
}
}
function fun3(){
//定位checkbox
var obj = $(":checkbox"); //数组,有三个对象
for(var i=0;i<obj.length;i++){
var dom = obj[i];
//alert(dom.value);
//使用jqueyr的val函数, 获取value的值
//1. 需要jquery对象
var jObj = $(dom); // jObj 是jquery对象
//2. 调用jquery函数
alert("jquery的函数调用=" + jObj.val());
}
}
</script>
<body>
<input type="text" value="我是type=text" /><br/>
<br/>
<input type="radio" value="man" /> 男 <br/>
<input type="radio" value="woman" /> 女 <br/>
<br/>
<input type="checkbox" value="bike" /> 骑行 <br/>
<input type="checkbox" value="football" /> 足球 <br/>
<input type="checkbox" value="music" /> 音乐 <br/>
<br/>
<input type="button" value="读取text的值" onclick="javascript language-javascript">fun1()"/>
<br/>
<input type="button" value="读取radio的值" onclick="javascript language-javascript">fun2()"/>
<br/>
<input type="button" value="读取checkbox的值" onclick="javascript language-javascript">fun3()"/>
</body>
过滤器
-
过滤器就是过滤条件,对已经定位到数组中 DOM 对象进行过滤筛选,过滤条件不能独立 出现在 jquery 函数,如果使用只能出现在选择器后方。
-
在定位了dom对象后,根据一些条件筛选dom对象。
- 过滤器有是一个字符串,用来筛选dom对象的。
- 过滤器不能单独使用, 必须和选择器一起使用。
1) ( " 选择器 : f i r s t " ) ∗ ∗ : 第一个 d o m 对象 2 ) ∗ ∗ ("选择器:first")** : 第一个dom对象 2)** ("选择器:first")∗∗:第一个dom对象2)∗∗(“选择器:last”): 数组中的最后一个dom对象
3) ( " 选择器 : e q ( 数组的下标 ) " ) ∗ ∗ :获取指定下标的 d o m 对象 4 ) ∗ ∗ ("选择器:eq(数组的下标)")** :获取指定下标的dom对象 4)** ("选择器:eq(数组的下标)")∗∗:获取指定下标的dom对象4)∗∗(“选择器:lt(下标)”) : 获取小于下标的所有dom对象
5)$(“选择器:gt(下标)”) : 获取大于下标的所有dom对象
<script type="text/javascript">javascript">
// $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(),
// 相当于是onLoad().
$(function() {
//当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
$("#btn1").click(function(){
//过滤器
var obj = $("div:first");
obj.css("background","red");
})
//绑定事件
$("#btn2").click(function(){
var obj = $("div:last");
obj.css("background","green");
})
//绑定btn3的事件
$("#btn3").click(function(){
var obj = $("div:eq(3)");
obj.css("background","blue");
})
$("#btn4").click(function(){
var obj = $("div:lt(3)");
obj.css("background","orange");
})
$("#btn5").click(function(){
var obj = $("div:gt(3)");
obj.css("background","yellow");
})
$("#txt").keydown(function(){
alert("keydown")
})
})
</script>
<body>
<input type="text" id="txt" />
<div id="one">我是div-0</div>
<div id="two">我是div-1</div>
<div>我是div-2
<div>我是div-3</div>
<div>我是div-4</div>
</div>
<div>我是div-5</div>
<br />
<span>我是span</span>
<br/>
<input type="button" value="获取第一个div" id="btn1"/>
<br/>
<input type="button" value="获取最后一个div" id="btn2"/>
<br/>
<input type="button" value="获取下标等于3的div" id="btn3"/>
<br/>
<input type="button" value="获取下标小于3的div" id="btn4"/>
<br/>
<input type="button" value="获取下标大于3的div" id="btn5"/>
</body>
表单属性过滤器
- 根据表单中dom对象的状态情况,定位dom对象的。
- 启用状态 enabled
- 不可用状态 disabled
- 选择状态 checked , 例如radio, checkbox
<script type="text/javascript">javascript">
// $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(),
// 相当于是onLoad().
$(function() {
//当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
$("#btn1").click(function(){
//获取所有可以使用的text
var obj = $(":text:enabled");
//设置 jquery数组值所有dom对象的value值
obj.val("hello");
})
$("#btn2").click(function(){
//获取选中的checkbox
var obj = $(":checkbox:checked");
for(var i=0;i<obj.length;i++){
//alert( obj[i].value);
alert( $(obj[i]).val() )
}
})
})
</script>
<body>
<input type="text" id="txt1" value="text1" /><br/>
<input type="text" id="txt2" value="text2" disabled="true"/><br/>
<input type="text" id="txt3" value="text3" /><br/>
<input type="text" id="txt4" value="text4" disabled/><br/>
<br/>
<input type="checkbox" value="游泳" />游泳 <br/>
<input type="checkbox" value="健身" checked />健身 <br/>
<input type="checkbox" value="电子游戏" checked />电子游戏 <br/>
<br/>
<select id="yuyan">
<option value="java">java语言</option>
<option value="go" selected>go语言</option>
<option value="python">python语言</option>
</select>
<br/>
<input type="button" value="设置可以的text的value是hello" id="btn1"/>
<br/>
<button id="btn2">显示选中的复选框的值</button>
<br/>
<button id="btn3">显示选中下拉列表框的值</button>
</body>
- 选择指定下拉列表的被选中元素
- 选择器>option:selected
<script type="text/javascript">javascript">
// $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(),
// 相当于是onLoad().
$(function() {
//当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
$("#btn3").click(function(){
//获取select选中的值
//var obj= $("select>option:selected");
var obj = $("#yuyan>option:selected");
alert(obj.val());
})
})
</script>
<body>
<button id="btn3">显示选中下拉列表框的值</button>
</body>
函数
第一组
- val 操作数组中 DOM 对象的 value 属性
- $(选择器).val() :无参数调用形式, 读取数组中第一个 DOM 对象的 value 属性值
- $(选择器).val(值):有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值
- text 操作数组中所有 DOM 对象的【文字显示内容属性】
- $(选择器).text():无参数调用,读取数组中所有 DOM 对象的文字显示内容,将得到内容拼接为一个字符串返回
- $(选择器).text(值):有参数方式,对数组中所有 DOM 对象的文字显示内容进行统一赋值
- attr 对 val, text 之外的其他属性操作
- $(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值
- $(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值
<script type="text/javascript">javascript">
//在dom对象创建好后,绑定事件
$(function(){
$("#btn1").click(function(){
//val() 获取dom数组中第一个对象的value属性值
var text = $(":text").val();
alert(text)
})
$("#btn2").click(function(){
//设置所有的text的value为新值
$(":text").val("三国演义");
})
$("#btn3").click(function(){
//获取div ,text()无参数,获取dom对象的文本值,连接成一个字符串
alert($("div").text());
})
$("#btn4").click(function(){
//设置div的文本值
$("div").text("新的div文本内容");
})
$("#btn5").click(function(){
//读取指定属性的值
alert($("img").attr("src"));
})
$("#btn6").click(function(){
//设置指定属性的,指定值
$("img").attr("src","img/ex2.jpg");
//val(), text();
})
})
</script>
</head>
<body>
<input type="text" value="刘备" /><br/>
<input type="text" value="关羽" /><br/>
<input type="text" value="张飞" /><br/>
<br/>
<div>1.我第一个div</div>
<div>2.我第二个div</div>
<div>3.我第三个div</div>
<br/>
<img src="img/ex1.jpg" id="image1" />
<br/>
<input type="button" value="获取第一文本框的值" id="btn1"/>
<br/>
<br/>
<input type="button" value="设置所有文本框的value值" id="btn2"/>
<br/>
<br/>
<input type="button" value="获取所有div的文本值" id="btn3"/>
<br/>
<br/>
<input type="button" value="设置div的文本值" id="btn4"/>
<br/>
<br/>
<input type="button" value="读取src属性的值" id="btn5"/>
<br/>
<br/>
<input type="button" value="设置指定的属性值" id="btn6"/>
</body>
第二组
-
hide $(选择器).hide():将数组中所有 DOM 对象隐藏起来
-
show $(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来
-
remove $(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除 (满门抄斩)
-
empty $(选择器).empty():将数组中所有 DOM 对象的子对象删除 (断子绝孙)
-
append 为数组中所有 DOM 对象添加子对象
- $(选择器).append(“我动态添加的 div”)
-
html 设置或返回被选元素的内容(innerHTML)。
- $(选择器).html():无参数调用方法,获取 DOM 数组第一个匹元素的内容。
- $(选择器).html(值):有参数调用,用于设置 DOM 数组中所有元素的内容。
<script type="text/javascript">javascript">
//在dom对象创建好后,绑定事件
$(function(){
$("#btn1").click(function(){
//使用remove:删除父和子所有的dom对象
$("select").remove();
})
$("#btn2").click(function(){
//使用empty 删除子dom对象
$("select").empty();
})
$("#btn3").click(function(){
//使用append,增加dom对象
//$("#fatcher").append("<input type='button' value='我是增加的按钮' />")
//增加一个table
$("#fatcher").append("<table border=1><tr><td>第一列</td><td>第二列</td></tr></table>");
})
$("#btn4").click(function(){
//使用html()函数,获取数组中第一个dom对象的文本值(innerHTML)
//alert($("span").text()); // 我是mysql数据库
alert( $("span").html() ); //我是mysql <b>数据库</b>
})
$("#btn5").click(function(){
//使用 html(有参数):设置dom对象的文本值
$("span").html("我是新的<b>数据</b>");
})
})
</script>
<body>
<input type="text" value="刘备" />
<input type="text" value="关羽" />
<input type="text" value="张飞" />
<br/>
<select>
<option value="老虎">老虎</option>
<option value="狮子">狮子</option>
<option value="豹子">豹子</option>
</select>
<br/>
<br/>
<select>
<option value="亚洲">亚洲</option>
<option value="欧洲">欧洲</option>
<option value="美洲">美洲</option>
</select>
<br/>
<br/>
<div id="fatcher">我是第一个div</div>
<br/
<br/>
<span>我是mysql <b>数据库</b></span>
<br/>
<span>我是jdbc</span>
<br/>
<br/>
<input type="button" value="使用remove删除父和子对象" id="btn1"/>
<br/>
<br/>
<input type="button" value="使用empty删子对象" id="btn2"/>
<br/>
<br/>
<input type="button" value="使用append,增加dom对象" id="btn3"/>
<br/>
<br/>
<input type="button" value="获取第一个dom的文本值" id="btn4"/>
<br/>
<br/>
<input type="button" value="设置span的所以dom的文本值" id="btn5"/>
</body>
each语法
1). 可以对 数组, json ,dom数组循环处理。 数组, json中的每个成员都会调用一次处理函数。
? var arr = [ 1, 2, 3 ] //数组
? var json = {“name”:“lisi”,“age”:20 }
? var obj = $(“:text”);
语法: $.each( 循环的内容, 处理函数 ) :表示使用jquery的each,循环数组,每个数组成员,
都会执行后面的“处理函数”一次。
-
$: 相当于是java的一个类名
-
each:就是类中的静态方法。
- 静态方法调用,可以使用 类名.方法名称
-
处理函数:function(index, element) :
- index, element都是自定义的形参, 名称自定义(你可以定义成(i, n)实际上就是下标对于的值)。
index:循环的索引
element:数组中的成员
- index, element都是自定义的形参, 名称自定义(你可以定义成(i, n)实际上就是下标对于的值)。
js循环数组:
for(var i=0;i<arr.length;i++){
var item = arr[i]; //数组成员
//操作数组成员
output( i , item);
}
function output(index, element){
输出index ,element
}
------------------------------------------------------------------------
$("#btn6").click(function(){
//循环普通数组,非dom数组
var arr = [ 11, 12, 13];
$.each(arr, function(i,n){
alert("循环变量:"+i + "=====数组成员:"+ n);
})
})
$("#btn7").click(function(){
//循环json
var json={"name":"张三","age":20};
//var obj = eval("{'name':'张三','age':20}");
$.each(json,function(k,v){
alert("k是key="+ k +",v是值value="+ v);
})
})
$("#btn8").click(function(){
//循环dom数组
var domArray = $(":text");//dom数组
$.each( domArray, function(i,n){
// n 是数组中的dom对象
alert("i="+i+" , n="+n.value);
})
})
2).循环jquery对象, jquery对象就是dom数组
jquery对象.each( function(index,element){} )
javascript">$("#btn9").click(function(){
//循环jquery对象, jquery对象就是dom数组
$(":text").each(function(i,n){
alert("i="+i+",n="+ n.value);
})
})
jquerydom_737">jquery中给dom对象绑定事件
1)$(选择器).事件名称( 事件的处理函数)
$(选择器):定位dom对象, dom对象可以有多个, 这些dom对象都绑定事件了
事件名称:就是js中事件去掉on的部分,例如 js中的单击事件 onclick(), jquery中的事件名称,就是click,都是小写的。
- 事件的处理函数:就是一个function ,当事件发生时,执行这个函数的内容。
javascript">// 例如给id是btn的按钮绑定单击事件
$("#btn").click(funtion(){
alert("btn按钮单击了")
})
- on 事件绑定
$(选择器).on( 事件名称 , 事件的处理函数)
-
事件名称: 就是js事件中去掉on的部分, 例如js中onclick ,这里就是click
-
事件的处理函数: function 定义
javascript">// 例如
<input type="button" id="btn">
$("#btn").on("click", function() { 处理按钮单击 } )
<script type="text/javascript">javascript">
//在dom对象创建好后,绑定事件
$(function(){
$("#btn1").click(function(){
//使用append增加dom对象
$("#mydiv").append("<input id='newBtn' type='button' value='我是新加入的按钮'/>");
//使用on给按钮绑定事件
$("#newBtn").on("click",function(){
alert("新建的按钮被单击了");
})
})
})
</script>
<body>
<div id="mydiv">
我是一个div ,需要增加一个button
</div>
<input type="button" value="创建一个button,绑定一个click" id="btn1"/>
<br/>
</body>
AJAX
-
使用jquery的函数,实现ajax请求的处理。
-
没有jquery之前,使用XMLHttpRequest做ajax , 有4个步骤。
- 创建XMLHTTPRequest对象
- var xhr = new XMLHttpRequest();
- 注册回调函数
- xhr.onreadystatechange = function(){ }
- 开启通道
- xhr.open(“GET”, “/ajax/ajaxrequest2”, true)
- 发送请求
- xhr.send()
- 创建XMLHTTPRequest对象
-
jquery简化了ajax请求的处理。 使用三个函数可以实现ajax请求的处理。
1) . a j a x ( ) ∗ ∗ : j q u e r y 中实现 a j a x 的核心函数。 2 ) ∗ ∗ .ajax()** : jquery中实现ajax的核心函数。 2) ** .ajax()∗∗:jquery中实现ajax的核心函数。2)∗∗.post() : 使用post方式做ajax请求。 语法: . p o s t ( U R L , d a t a , f u n c t i o n ( d a t a , s t a t u s , x h r ) , d a t a T y p e ) 3 ) ∗ ∗ .post(URL,data,function(data,status,xhr),dataType) 3) ** .post(URL,data,function(data,status,xhr),dataType)3)∗∗.get()** : 使用get方式发送ajax请求。 语法:$.get(url,data,function(data,status,xhr),dataType)
. p o s t ( ) 和 .post()和 .post()和.get() 他们在内部都是调用的 $.ajax()
介绍 $.ajax函数的使用,函数的参数表示请求的url, 请求的方式,参数值等信息。
-
$.ajax()参数是一个json的结构。
- 例如: $.ajax( {名称:值, 名称1:值1… } )
-
json结构的参数说明:
1)async:是一个boolean类型的值, 默认是true ,表示异步请求的。可以不写async这个配置项
xmlHttp.open(get,url,true),第三个参数一样的意思。2)contentType: 一个字符串,表示从浏览器发送服务器的参数的类型。 可以不写。
例如你想表示请求的参数是json格式的, 可以写application/json? 默认是: “application/x-www-form-urlencoded”。
3)data: 规定要发送到服务器的数据,可以是字符串,数组,json,表示请求的参数和参数值。 常用的是json格式的数据
4)dataType: 表示期望从服务器端返回的数据格式,可选的有: xml , html ,text ,json当我们使用$.ajax()发送请求时, 会把 dataType的值发送给服务器, 那我们的servlet能够读取到dataType的值,就知道你的浏览器需要的是 json或者xml的数据,那么服务器就可以返回你需要的数据格式。
5)error**(xhr,status,error)**: 一个function ,表示当请求发生错误时,执行的函数。
error:function() { 发生错误时执行 }6)success(result,status,xhr):一个function , 请求成功了,从服务器端返回了数据,会执行success指定函数
之前使用XMLHttpRequest对象, 当readyState4 && status200的时候。7)url:请求的地址
8)type:请求方式,get或者post, 不用区分大小写。 默认是get方式。
javascript">$.ajax( { async:true ,
contentType:"application/json" ,
data: {name:"lisi",age:20 },
dataType:"json",
error:function(){
请求出现错误时,执行的函数
},
success:function( data ) {
// data 就是responseText, 是jquery处理后的数据。
},
url:"bmiAjax",
type:"get"
}
)
主要使用的是 url , data ,dataType, success .
- 代码示例:
javascript">$(function(){
$("#btn").click(function () {
//获取dom的value值
var proid = $("#proid").val();
//发起ajax请求
$.ajax({
url:"queryjson",
data:{
"proid":proid
},
dataType:"json",
success:function (resp) {
//resp是json对象
//alert(resp.name + " === "+resp.jiancheng)
$("#proname").val(resp.name);
$("#projiancheng").val(resp.jiancheng);
$("#proshenghui").val(resp.shenghui);
}
})
});
})