1.什么是URL?
URL是统一资源定位符,浏览器通过URL定位资源的存放位置
URL地址组成:
(1)客户端与服务器之间的通信协议
(2)存有该资源的服务器名称
(3)资源在服务器上的具体存放位置
客户端与服务器之间的请求分为:请求,处理,响应3个步骤
在网页中如何请求数据?
在网页中请求数据要用到XMLHttpRequest对象,简称xhr,这是浏览器中内置的JS对象,用于请求服务器上的资源
用法
var xhr=new XMLHttpRequest()
资源请求方式
(1)get请求:常用于获取服务器资源
(2)post请求,常用于向服务器发送资源
ajax就是异步的JavaScript和XML
在网页中利用XMLHttpRequest对象和服务器进行交互就是AJAX
jQuery中的AJAX
1.$.get()
语法如下
$.get(url,[data],[callback]);
//url:必选项,参数类型是字符串
//[data]:可选项,参数类型是对象,请求资源期间携带的参数,发送到服务器
//[callback]:可选项,参数类型是function,请求成功的回调函数
示例
$.get('',function(res){
console.log(res)
})
<button id="btnGet">发起不带参数的get请求</button>
<script>
$(function(){
$('#btnGet').on('click',function(){
$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
console.log(res);
})
})
})
</script>
<button id="btnGET">带参数的GET请求</button>
<script>
$(function () {
$('#btnGET').on('click', function () {
$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 2 }, function (res) {
console.log('res');
})
})
})
</script>
2.$.post()
$.post(url,[data],[callback])
<button id="postBtn">发起POST请求</button>
<script>
$('#postBtn').on('click', function () {
$.post('http://www.liulongbin.top:3006/api/addbook'), {
bookname: 'jjj', author: '是哦L', publisher: '上海教育出版社'
}, function (res) {
console.log(res);
}
})
</script>
3.$.ajax()既可以发起post请求也可以发起get请求
$.ajax({
type:''; //请求类型
url:''; //请求的URL地址
data:{}; //请求要携带的数据
success:function(res){} //请求成功的回调函数
})
<button id="getBtn">$.ajax发起GET请求</button>
<script>
$(function () {
$('#getBtn').on('click', function () {
$.ajax({
type: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks',
data: { id: 1 },
success: function (res) {
console.log(res)
}
})
})
})
</script>
接口:
使用AJAX请求数据时,请求的URL地址就是数据接口,简称接口,每个接口必须有请求方式
接口文档:
接口的说明文档,是调试接口的依据,包含了对URL,参数,以及输出内容的说明
接口文档的组成部分:
1.接口名称 2.接口URL 3.接口调用方式 4.参数格式 5.响应格式 6.返回示例
表单组成:
表单标签,表单域,表单按钮
form标签的属性
<form></form>用来采集数据
属性 | 值 | 描述 |
action | URL地址 | 规定表单提交时向何处提交数据 |
method | get或post | 规定以何种方式吧表单数据提交到action URL |
enctype | application/x-www-form-urlencoded | 发送前编码所有字符,默认 |
multipart/form-datatext/plain | 不i对字符编码,使用包含文件上传控件的表单时,必须使用该值,规定在发送表单之前如何进行编码 | |
target | _blank | 新窗口打开 |
_self | 在相同框架中打开 | |
_parent | 规定在何处打开action URL | |
_top | ||
framename |
表单的同步提交:
通过点击submit按钮,触发表单提交的操作,使页面跳转到action url的行为,叫做表单的同步提交
通过AJAX提交表单
<form id='form1'></form>
<script>
$('#form1').submit(function(e){
alert('监听到表单提交事件');
})
$('#form1').on('click',function(e){
alert('监听到表单提交事件');
})
</script>
阻止表单的默认行为
$('#form1').submit(function(e){
e.preventDefault();
})
快速获取表单数据
$(seletor).serialize()
$('#form1').submit(function(e){
e.serialize();
})