java jquery ajax视频,【Ajax】之jQuery中的Ajax

Ajax

1.jQuery中的Ajax

load()方法

异步请求的地址

异步请求的数据

异步请求成功后的回调函数

返回值服务器端的响应结果jquery

按钮

$('button').click(function(){

$('button').load('data/server2.json', {name:'犬夜叉'}, function(){

console.log('异步请求成功...');

});

});

$.get()与$.post()方法

$.get(url, data, callback, type)方法-请求方式GET

$.post()方法-请求方式POST

异步请求的地址

异步请求的数据

异步请求成功后的回调函数

设置服务器端响应结果的格式ajax

按钮

$('button').click(function(){

$.get('data/server2.json', {name:'犬夜叉'}, function(response){

console.log(response);

}, 'json');

});

ajax()方法

url；异步请求的地址

settings-对象类型

data - 发送给服务器端的请求数据

dataType-服务器端响应结果的格式

success-异步请求成功后回调函数json

按钮

$('button').click(function(){

$.ajax('data/server2.json', {

type : 'get',

dataType : 'text',

success : function(data){

console.log(data);

}

});

});

$.getScript方法

url；JavaScript文件url地址

callback；该文件成功加载后回调函数

`

按钮

服务器

$('button').click(function () {

// 动态加载指定JavaScript文件，而且执行

$.getScript('data/server.js',function (data) {

console.log(data);

eval(data);

});

});

`异步

$.getJSON()方法

url；JavaScript文件url地址

data；发送个服务端key/value的数据内容

callback；该文件成功加载后回调函数函数

按钮

$('button').click(function(){

// getJSON()方法的请求方式为GET

$.getJSON('data/server2.json', {name:'张无忌'},function(data){

console.log(data);

});

});

2.异步提交表单

获取全部表单组件的数据值

并该数据值拼成指定的字符串和JSON格式的数据

并经过异步交互的方式提交表单post

表单序列化

serialize()方法把表单组件数据值转换为字符串内容

serializeArray()方法把表单组件数据值转换为JSON的数据格式url

$('form').bind('submit',function (event) {

event.preventDefault();

// 　阻止默认行为

/*var data = $('form').serialize();*/

var data = $('form').serializeArray();

// 根据表单默认同步提交获取数据方式

console.log(data);

$.post('data/server5.json',daa, function (response) {

// 经过异步交互提交表单

console.log(response);

});

});