jQuery中的Ajax
在jQuery中使用Ajax
在jQuery提供了一系列的方法来对Ajax进行操作
- load()方法
- $.get()方法
- $.post()方法
- ajax()方法
- $.getScript()方法
- $.getJSON()方法
load()方法
参数
- 第一个参数 – 表示异步交互的请求地址
第二个参数 – 表示异步交互的请求数据
- 省略请求数据时，当前的请求方式为 GET
- 发送请求数据时，当前的请求方式为 POST
- 第三个参数 – 表示异步交互请求成功后的回调函数
该方法具有返回值
- 服务器端的响应结果
注意
- 会自动将返回结果写到HTML页面的指定目标元素中
示例代码
<body>
<button id="btn">按钮</button>
<script src="chajian/jquery.js"></script>
<script>
var $btn = $( '#btn' );
$btn.click( function () {
$btn.load( 'JSON.json', {name:'融念冰'}, function () {
console.log( '三步白头' );
} );
} );
</script>
</body>$.get()方法
- 该方法的请求方式为 GET
参数
- 第一个参数 – 表示异步交互的请求地址
- 第二个参数 – 表示异步交互的请求数据
第三个参数 – 表示异步交互请求成功后的回调函数
- response参数 – 表示获取当前的JSON文件内容
第四个参数 – 表示设置服务器端响应结果的格式
- xml、html、script、json、text等
示例代码
<body>
<button id="btn">按钮</button>
<script src="chajian/jquery.js"></script>
<script>
var $btn = $( '#btn' );
$btn.click( function () {
$.get( 'JSON.json', {name:'融念冰'}, function ( response ) {
console.log( response );
}, 'json' );
</script>
</body>$.post()方法
- 该方法的请求方式为 POST
参数
- 第一个参数 – 表示异步交互的请求地址
- 第二个参数 – 表示异步交互的请求数据
第三个参数 – 表示异步交互请求成功后的回调函数
- response参数 – 表示获取当前的JSON文件内容
第四个参数 – 表示设置服务器端响应结果的格式
- xml、html、script、json、text等
示例代码
<body>
<button id="btn">按钮</button>
<script src="chajian/jquery.js"></script>
<script>
var $btn = $( '#btn' );
$btn.click( function () {
$.post( 'JSON.json', {name:'融念冰'}, function ( response ) {
console.log( response );
}, 'json' );
} );
</script>
</body>ajax()方法
参数
- 第一个参数 – 表示异步交互请求的地址
第二个参数 – 表示设置异步交互请求的
- 该参数的可选项
- type – 设置当前的请求方式
- data – 发送给服务器端的请求数据
- dataType – 服务器端响应结果的格式
success – 异步交互请求成功后的回调函数
回调函数的参数
- data – 表示服务器端响应的结果
- textStatus – 表示服务器端当前的状态
- jqXHR – Ajax中的核心对象
示例代码
<body>
<button id="btn">按钮</button>
<script src="chajian/jquery.js"></script>
<script>
var $btn = $( '#btn' );
$btn.click( function () {
$.ajax( 'JSON.json', {
type : 'get',
dataType : 'text',
success : function( data ) {
console.log( data );
}
} );
} );
</script>
</body>$.getScript()方法
- 该方法的请求方式为 GET
参数
- 第一个参数 – 表示请求JavaScript文件的地址
第二个参数 – 指定JavaScript文件加载成功的回调函数
- 该回调函数的参数
- data – 表示获取指定文件的内容
示例代码
<body>
<button id="btn">按钮</button>
<script src="chajian/jquery.js"></script>
<script>
var $btn = $( '#btn' );
$btn.click( function () {
$.getScript( 'JS.js', function( data ) {
console.log( data );
eval( data );
} );
} );
</script>
</body>$.getJSON()方法
- 该方法的请求方式为 GET
参数
- 第一个参数 – 表示请求JavaScript文件的地址
- 第二个参数 – 表示发送给服务器端的数据内容
第三个参数 – 指定JavaScript文件加载成功的回调函数
- 该回调函数的参数
- data – 表示获取指定文件的内容
示例代码
<body>
<button id="btn">按钮</button>
<script src="chajian/jquery.js"></script>
<script>
var $btn = $( '#btn' );
$btn.click( function () {
$.getJSON( 'JS.js',{name:'唐三'}, function( data ) {
console.log( data );
} );
} );
</script>
</body>异步提交表单
<body>
<form action="#">
<input type="text" id="name">
<input type="submit">
</form>
<script src="chajian/jquery.js"></script>
<script>
var $form = $( 'form' );
$form.bind( 'submit', function( event ) {
// 通过事件属性来阻止表单提交的默认行为
event.preventDefault();
// 通过val()方法来获取表单组件的数据内容
var name = $( '#name' ).val();
// 构建发送给服务器端的数据格式
var data = 'name=' + name;
// 通过异步交互提交表单
$.post( 'JSON.json', data, function( response ) {
console.log( response );
} );
} );
</script>
</body>表单序列化
- 根据表单默认同步提交获取数据的方式
serialize()方法
- 将数据内容序列化为指定格式的字符串内容
serializeArray()方法
- 将数据内容序列化为JSON格式的数据内容
示例代码
<body>
<form action="#">
<input type="text" name="username" id="name">
<input type="text" name="password" id="pwd">
<input type="submit">
</form>
<script src="chajian/jquery.js"></script>
<script>
var $form = $( 'form' );
$form.bind( 'submit', function( event ) {
// 阻止默认行为
event.preventDefault();
/*
根据表单默认同步提交获取数据的方式
* serialize()方法
* 将数据内容序列化为指定格式的字符串内容
* serializeArray()方法
* 将数据内容序列化为JSON格式的数据内容
*/
// var data = $form.serialize();
var data = $form.serializeArray();
console.log(data);
// 3.通过异步交互提交表单
$.post( 'JSON.json', data, function( response ) {
console.log( response );
} );
} );
</script>
</body>