jQuery中的Ajax
一、jQuery提供的六个Ajax操作方法
1、load()方法
$element.load(url,[data],[callback])
参数： url:异步请求的HTML 页面的url地址。data: 发送给服务器端的key/value形式的数据内容。 如果省略请求数据的话，当前的请求方式为GET如果发送请求数据的话，当前的请求方式为POST callback: Ajax请求完成时的回调函数。 返回值： 服务器端的响应结果 注意：自动返回结果写入到元素中
2、 . g e t ( ) 与 .get()与 .get()与.post()方法
$.get()
请求方式为GET
$.get(url,[data],[callback],[type])
参数：
url:请求HTML页面的url地址。data:发送给服务器端的key/value形式的数据内容。callback: Ajax请求完成时的回调函数。type:设置返回数据内容的格式。值为xml、html、 script、 JSON、 text和_default。
$.post()
跟get一样
3、$.ajax()方法
$.ajax(url,[settings])
参数：
url - 请求地址settings -设置异步请求的参数
settings选项对象类型:
type -设置请求方式data- 发送给服务器端的请求数据dataType -服务器端响应结果的格式success -异步请求成功后的回调函数 function(data, textStatus, jqXHR){} data-表示服务器端响应的结果textStatus -表示服务器端当前的状态jqXHR - Ajax中的核心对象
$.ajax('url',{type:'',dataType:'',success:function(){}})
4、$.getScript()方法
是jQuery中动态加载js文件的方法
$.getScript(url,[callback])
5、$.getJSON()方法
请求方式始终是：GET
三级联动案例
ssk.json
[{"name":"javascript","value": ["java","javascript"]},{"name": "jquery","value": ["jquery","锋利的JQuery"]}]
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>搜索框</title><style>.container #search {width: 500px;}.container .alert {width: 500px;border: 1px solid lightgray;display: none;}.container .alert ul {list-style: none;margin: 0;padding: 0;}</style></head><body><div class="container"><!-- 搜索框--><input type="text" id="search"><!-- 提示框--><div class="alert"><ul><li>前端开发</li><li>前端课程</li><li>Web课程</li></ul></div></div><script src="js/jquery-1.10.1.js"></script><script >// 捕获用户输入行为：/** 1、绑定键盘事件 keydown keyup keypress* 2、键盘输入事件 input**/$('#search').bind('keydown',function () {$('.alert>ul').empty()// 根据输入的内容动态的获取相关提示数据var inputValue = $(this).val()$.getJSON('data/ssk.json',function (data) {// 遍历json$.each(data,function (index,obj) {var name = obj.nameif(name.indexOf(inputValue) >= 0){var value = obj.value$.each(value,function (index,text) {$('.alert>ul').append($('<li>'+text+'</li>'))})}})})// 将提示框隐藏状态切换到显示状态$('.alert').css('display','block')}).bind('blur',function () {$('.alert').css('display','none')})</script></body></html>
二、异步提交表单
通过Ajax异步交互方式提交表单
步骤如下：
获取表单及所有表单组件对应的数据值。将所有表单组件对应的数据值拼成特定格式的字符串或是JSON格式数据。通过Ajax异步交互方式提交表单。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>form表单</title></head><body><script src="js/jquery-1.10.1.js"></script><form action=""><input type="text" id="name"><input type="submit"></form><script >$('form').bind('submit',function (event) {event.preventDefault()// 获取表单组件内容var name = $('#name').val()// 构建发送给服务器端的数据格式var data = 'name=' + name// 通过异步交互提交表单$.post('data/server.js',data,function (res) {console.log(res)})})</script></body></html>
三、表单序列化
serialize(方法: 将表单组件对应的数据值序列化为指定格式的字符串内容。$('form").serialize()serializeArray(方法: 将表单组件对应的数据值序列化为、JSON格式的数据内容。
香
$('select, :radio').serializeArray()
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表单序列化</title></head><body><script src="js/jquery-1.10.1.js"></script><form action=""><input type="text" name="username" id="name"><input type="text" name="password" id="pwd"><input type="submit"></form><script >$('form').bind('submit',function (event) {event.preventDefault()// 表单序列化、// var data = $('form').serialize()var data = $('form').serializeArray()console.log(data)// 通过异步交互提交表单$.post('data/server.js',data,function (res) {console.log(res)})})</script></body></html>
