开篇基础
jQuery 是一款跨主流浏览器的 JavaScript 库,封装了 JavaScript 相关方法调用,简化JavaScript 对 HTML DOM 操作
官网地址:
https://jquery.com/
为什么使用 jQuery
非常重要的理由就是:它能够兼容市面上主流的浏览器,IE 和 FireFox,
Google
浏览器处理 AJAX
,创建异步对象是不同的,而
jQuery
能够使用一种方式在不同的浏览器创建
AJAX 异步对象。
其他优点:
- 写少代码,做多事情【write less do more】
- 免费,开源且轻量级的 js 库,容量很小
- 兼容市面上主流浏览器,例如 IE,Firefox,Chrome
- 能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果,也能提供异步 AJAX功能
-
文档手册很全
例如:使用
JavaScript
定位
DOM
对象常用的三种方式:
- 通过 ID 属性:document.getElementById()
- 通过 class 属性:getElementsByClassName()
- 通过标签名:document.getElementsByTagName()
上面代码可以看出
JavaScript
方法名太长了,大小写的组合太多了,编写代码效率,容易出
错。
jQuery
分别使用
$(“#id”) , $(“.class
名
”) , $(“
标签名
)
封装了上面的
js
方法。
第一个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个例子</title>
<!-- 指定jquery的库文件位置, 使用相对路径,当前项目的js目录下的指定文件 -->
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
/*
1. $(document) , $是jQuery中的函数名称, document是函数的参数
作用是 document对象变成 jQuery函数库可以使用的对象。
2. ready:是jQuery中的函数, 是准备的意思, 当页面的dom对象加载成功后
会执行ready函数的内容。 ready 相当于js中的onLoad事件
3. function()自定义的表示onLoad后要执行的功能。
*/
$(document).ready(function(){
//自定义的功能代码
alert("Hello jQuery")
})
//和上面效果一样,一般使用这种写法(简洁方便)
$( function(){
//代码内容
alert("Hello JQuery 快捷方式")
}
)
</script>
</head>
<body>
</body>
</html>
DOM 对象
文档对象模型(
Document Object Model
,简称
DOM
),是
W3C
组织推荐的处理可扩展标志语言的标准编程接口。
通过
DOM
对
HTML
页面的解析,可以将页面元素解析为元素节点、属性节点和文本节点,这些解析出的节点对象,即 DOM
对象。
DOM
对象可以使用
JavaScript
中的方法。
JavaScript 对象和 jQuery 对象
用
JavaScript
语法创建的对象叫做
JavaScript
对象
, JavaScript
对象只能调用
JavaScript
对象的 API
。
用
JQuery
语法创建的对象叫做
JQuery
对象
, jQuery
对象只能调用
jQuery
对象的
API
。jQuery 对象是一个数组。在数组中存放本次定位的
DOM
对象。
JQuery
对象与
JavaScript
对象是可以互相转化的,一般地,由于
Jquery
用起来更加方便,我们一般是将 JavaScript
对象转化成
Jquery
对象
获取
jQuery
官网下载地址:
https://jquery.com/download/
DOM 对象和 jQuery 对象
DOM
对象是用
JavaScript
语法创建的对象,也看做是
js
对象
jQuery对象就相当于数组对象,而DOM对象就是里面存放的对象,两者方法和属性使用方式不同
1.DOM 对象转换 jQuery 对象:
使用
$(DOM
对象
)
方式,可以
DOM
对象转换为
jQuery
对象,转换为 jQuery
对象才可以使用 jQuery
中的提供的方法,操作
DOM
对象。一般情况下,在命名
jQuery
对象时,为了与 DOM
对象进行区分,习惯性的以
$
开头,这不是必须的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom对象转为jquery</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/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>
</head>
<body>
<input type="button" id="btn" value="==我是按钮==" onclick="btnClick()" />
</body>
</html>
2.jQuery 对象转为 DOM 对象
jQuery
对象本身为数组对象,该数组中的第
0
个元素即为该
jQuery
对象对应的
DOM对象。所以有两种方式可以获取到 DOM
对象:
get(0)
方式与下标
[0]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/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>
</head>
<body>
<div>
<input type="button" value="计算平方" onclick="btnClick()" /><br/>
<input type="text" id="txt" value="整数" />
</div>
</body>
</html>
选择器
选择器
:
就是定位条件;通知
jquery
函数定位满足条件的
DOM
对象
基本选择器
根据
ID
,
class
属性,标签类型名定位
HTML
元素,转为
jQuery
对象
.
- id 选择器 语法:$(“#id”)
- class 选择器 语法:$(“.class 名称”)
- 标签选择器 语法:$(“标签名”)
- 所有选择器 语法:$(“*”) 选取页面中所有 DOM 对象。
- 组合选择器 语法:$(“id,class,标签名”)
组合选择器是多个被选对象间使用逗号分隔后形成的选择器,可以组合 id,class,标签名等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
background: gray;
width: 200px;
height: 100px;
}
.two{
background: gold;
font-size: 20pt;
}
</style>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/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(){
var obj = $("*");
obj.css("background","green");
}
function fun5(){
var obj = $("#one,.two,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="fun1()" />
<br/>
<input type="button" value="使用class样式获取dom对象" onclick="fun2()" />
<br/>
<input type="button" value="使用标签选择器" onclick="fun3()" />
<br/>
<input type="button" value="所有选择器" onclick="fun4()"/>
<br/>
<input type="button" value="组合选择器" onclick="fun5()"/>
</body>
</html>
表单选择器
表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>
,均可做出相应选择。表单选择器是为了能更加容易地操作表单,表单选择器是根据元素类型来定义的
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button">
<input type="file">
<input type="submit">
<input type="reset">
注意:$(":tr"): 不能用,tr 不是 input 标签
语法:$(":type 属性值")
$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/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>
</head>
<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="fun1()"/>
<br/>
<input type="button" value="读取radio的值" onclick="fun2()"/>
<br/>
<input type="button" value="读取checkbox的值" onclick="fun3()"/>
</body>
</html>
过滤器
jQuery
对象中存储的
DOM
对象顺序与页面标签声明位置关系
<div>1</div> dom1<div>2</div> dom2<div>3</div> dom3$("div") == [dom1,dom2,dom3]
过滤器就是过滤条件,对已经定位到数组中
DOM
对象进行过滤筛选,过滤条件不能独立
出现在
jquery
函数,如果使用只能出现在选择器后方
基本过滤器
- 选择第一个 first, 保留数组中第一个 DOM 对象 语法:$(“选择器:first”)
- 选择最后个 last, 保留数组中最后 DOM 对象 语法:$("选择器:last")
- 选择数组中指定对象 语法:$(“选择器:eq(数组索引)”)
- 选择数组中小于指定索引的所有 DOM 对象 语法:$(“选择器:lt(数组索引)”)
- 选择数组中大于指定索引的所有 DOM 对象 语法:$(“选择器:gt(数组索引)”)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
background: gray;
}
</style>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(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>
</head>
<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>
</html>
表单对象属性过滤器
- 选择可用的文本框 $(“:text:enabled”)
- 选择不可用的文本框 $(“:text:disabled”)
- 复选框选中的元素 $(“:checkbox:checked”)
- 选择指定下拉列表的被选中元素 选择器>option:selected
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
background: gray;
}
</style>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
$("#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() )
alert(obj[i].value)
}
})
$("#btn3").click(function(){
//获取select选中的值
//var obj= $("select>option:selected");
var obj = $("#yuyan>option:selected");
alert(obj.val());
})
})
</script>
</head>
<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>
</html>
函数
1. val
操作数组中
DOM
对象的
value
属性
.
$(
选择器
).val()
:无参数调用形式, 读取数组中第一个
DOM
对象的
value
属性值
$(
选择器
).val(
值
)
:有参形式调用
;
对数组中所有
DOM
对象的
value
属性值进行统一赋值
2.text
操作数组中所有
DOM
对象的【文字显示内容属性】
$(
选择器
).text():
无参数调用,读取数组中所有
DOM
对象的文字显示内容,将得到内容拼接为一个字符串返回
$(
选择器
).text(
值
):
有参数方式,对数组中所有
DOM
对象的文字显示内容进行统一赋值
3.attr
对
val, text
之外的其他属性操作
$(
选择器
).attr(
“属性名”
):
获取
DOM
数组第一个对象的属性值
$(
选择器
).attr(
“属性名”
,
“值”
):
对数组中所有
DOM
对象的属性设为新值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
background: yellow;
}
</style>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/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"/>
<input type="button" value="设置指定的属性值" id="btn6"/>
</body>
</html>
1.hide
$(
选择器
).hide() :
将数组中所有
DOM
对象隐藏起来
2.show
$(
选择器
).show():
将数组中所有
DOM
对象在浏览器中显示起来
3.remove
$(
选择器
).remove() :
将数组中所有
DOM
对象及其子对象一并删除
4.empty
$(
选择器
).empty()
:将数组中所有
DOM
对象的子对象删除
5.append
为数组中所有
DOM
对象添加子对象
$(
选择器
).append("<div>
我动态添加的
div</div>")
6.html
设置或返回被选元素的内容(
innerHTML
)。
$(
选择器
)
.html()
:无参数调用方法,获取
DOM
数组第一个匹元素的内容。
$(
选择器
)
.html(
值
)
:有参数调用,用于设置
DOM
数组中所有元素的内容。
7.each
each
是对数组,
json
和
dom
数组等的遍历
,
对每个元素调用一次函数。
语法
1
:
$.each(
要遍历的对象
, function(index,element) {
处理程序
} )
语法
2
:
jQuery
对象
.each( function( index, element ) {
处理程序
} )
index:
数组的下标
element:
数组的对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
background: yellow;
}
</style>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/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>");
})
$("#btn6").click(function(){
//循环普通数组,非dom数组
var arr = [ 11, 12, 13];
$.each(arr, function(index,element){
alert("循环变量:"+index + "=====数组成员:"+ element);
})
})
$("#btn7").click(function(){
//循环json
var json={"name":"张三","age":20};
//var obj = eval("{'name':'张三','age':20}");
$.each(json,function(i,n){
alert("i是key="+i+",n是值="+n);
})
})
$("#btn8").click(function(){
//循环dom数组
var domArray = $(":text");//dom数组
$.each( domArray, function(i,n){
// n 是数组中的dom对象
alert("i="+i+" , n="+n.value);
})
})
//和上面是一样的效果
$("#btn9").click(function(){
//循环jquery对象, jquery对象就是dom数组
$(":text").each(function(i,n){
alert("i="+i+",n="+ n.value);
})
})
})
</script>
</head>
<body>
<input type="text" value="刘备" />
<input type="text" value="关羽" />
<input type="text" value="张飞" /> <br/><br/>
<select>
<option value="老虎">老虎</option>
<option value="狮子">狮子</option>
<option value="豹子">豹子</option>
</select> <br/>
<select>
<option value="亚洲">亚洲</option>
<option value="欧洲">欧洲</option>
<option value="美洲">美洲</option>
</select> <br/><br/>
<div id="fatcher">我是第一个div</div> <br/>
<span>我是mysql <b>数据库</b></span> <br/>
<span>我是jdbc</span> <br/><br/>
<input type="button" value="使用remove删除父和子对象" id="btn1"/> <br/>
<input type="button" value="使用empty删子对象" id="btn2"/> <br/>
<input type="button" value="使用append,增加dom对象" id="btn3"/> <br/>
<input type="button" value="获取第一个dom的文本值" id="btn4"/> <br/>
<input type="button" value="设置span的所以dom的文本值" id="btn5"/> <br/>
<input type="button" value="循环普通数组" id="btn6"/> <br/>
<input type="button" value="循环json" id="btn7"/> <br/>
<input type="button" value="循环dom数组" id="btn8"/> <br/>
<input type="button" value="循环jquery对象" id="btn9"/> <br/>
</body>
</html>
事件
定义元素监听事件
语法:
$(
选择器
).
监听事件名称
(
处理函数
);
说明:监听事件名称是
js
事件中去掉
on
后的内容,
js
中的
onclick
的监听事件名称是
click
例如:
为页面中所有的
button
绑定
onclick,
并关联处理函数
fun1
$("button").click(fun1)
为页面中所有的
tr
标签绑定
onmouseover
,并关联处理函数
fun2
$("tr").mouseover(fun2)
on() 绑定事件
on()
方法在被选元素上添加事件处理程序。该方法给
API
带来很多便利,推荐使用该方法
语法:
$(
选择器
)
.on(event,,data,function)
event
:事件一个或者多个,多个之间空格分开
data
:可选。规定传递到函数的额外数据,
json
格式
function:
可选。规定当事件发生时运行的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
background: yellow;
}
</style>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
//在dom对象创建好后,绑定事件
$(function(){
$("#btn1").click(function(){
//使用append增加dom对象
$("#mydiv").append("<input id='newBtn' type='button' value='我是新加入的按钮'/>");
//使用on给按钮绑定事件
$("#newBtn").on("click",function(){
alert("新建的按钮被单击了");
})
})
})
</script>
</head>
<body>
<div id="mydiv">
我是一个div ,需要增加一个button
</div>
<input type="button" value="创建一个button,绑定一个click" id="btn1"/>
<br/>
</body>
</html>
jQuery AJAX
jQuery
提供多个与
AJAX
有关的方法。通过
jQuery AJAX
方法,您能够使用
HTTP Get 和 HTTP Post
从远程服务器上请求文本、
HTML
、
XML
或
JSON
同时能够把接收的数据更新到 DOM
对象
$.ajax()方法
$.ajax()
是
jQuery
中
AJAX
请求的核心方法,所有的其他方法都是在内部使用此方法。
语法:
$.ajax( { name:value, name:value, ... } )
说明:参数是
json
的数据,包含请求方式,数据,回调方法等
async
: 布尔值,表示请求是否异步处理。默认是
true
contentType
:发送数据到服务器时所使用的内容类型。默认是:
"application/x-www-form-urlencoded"
。
data
:规定要发送到服务器的数据,可以是:
string
, 数组,多数是
json
dataType
:期望从服务器响应的数据类型。
jQuery
从
xml, json, text, html
这些中测试最可能的类型
"xml" -
一个
XML
文档
"html" - HTML
作为纯文本
"text" -
纯文本字符串
"json" -
以
JSON
运行响应,并以对象返回
error(xhr,status,error)
:如果请求失败要运行的函数,
其中
xhr, status, error
是自定义的形参名
success(result,status,xhr)
:当请求成功时运行的函数,其中
result, status, xhr
是自定义的形参
type
:规定请求的类型(
GET
或
POST
等),默认是
GET
,
get
,
post
不用区分大小写
url
:规定发送请求的
URL
。
error() , success()
中的
xhr
是
XMLHttpRequest
对象。
主要使用的是 url , data ,dataType, success .
<html>
<head>
<title>使用json格式的数据</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/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);
}
})
});
})
</script>
</head>
<body>
<p>ajax请求使用json格式的数据</p>
<table>
<tr>
<td>省份编号:</td>
<td><input type="text" id="proid">
<input type="button" value="搜索" id="btn">
</td>
</tr>
<tr>
<td>省份名称:</td>
<td><input type="text" id="proname"></td>
</tr>
<tr>
<td>省份简称:</td>
<td><input type="text" id="projiancheng"></td>
</tr>
<tr>
<td>省会名称:</td>
<td><input type="text" id="proshenghui"></td>
</tr>
</table>
</body>
</html>
$.get()方法
$.get()
方法使用
HTTP GET
请求从服务器加载数据。
语法:
$.get(url,data,function(data,status,xhr),dataType)
url
必需。规定您需要请求的
URL
。
data
可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)
可选。当请求成功时运行的函数。
data,status,xhr
是自定义形参名。
参数说明:
data -
包含来自请求的结果数据
status -
包含请求的状态(
"success"
、
"notmodified"
、
"error"
、
"timeout"
、
"parsererror"
)
xhr -
包含
XMLHttpRequest
对象
dataType
可选。规定预期的服务器响应的数据类型。默认地,
jQuery
会智能判断。可能的类型:
"xml" -
一个
XML
文档
"html" - HTML
作为纯文本
"text" -
纯文本字符串
"json" -
以
JSON
运行响应,并以对象返回
$.post()方法
$.post()
方法使用
HTTP POST
请求从服务器加载数据。
语法:
$.post(URL,data,function(data,status,xhr),dataType)
参数同
$get()