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'）。serializeArray（）;

 

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

 

　　console.log（data）;

 

　　$.post（'data/server5.json',daa, function （response） {

 

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

 

　　console.log（response）;

 

　　}）;

 

　　}）;