在jQuery提供了一系列的方法来对Ajax进行操作
load()方法
$.get()方法
$.post()方法
ajax()方法
$.getScript()方法
$.getJSON()方法
参数
第一个参数 - 表示异步交互的请求地址
第二个参数 - 表示异步交互的请求数据
省略请求数据时,当前的请求方式为 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
参数
第一个参数 - 表示异步交互的请求地址
第二个参数 - 表示异步交互的请求数据
第三个参数 - 表示异步交互请求成功后的回调函数
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
参数
第一个参数 - 表示异步交互的请求地址
第二个参数 - 表示异步交互的请求数据
第三个参数 - 表示异步交互请求成功后的回调函数
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>
参数
第一个参数 - 表示异步交互请求的地址
第二个参数 - 表示设置异步交互请求的
该参数的可选项
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>
该方法的请求方式为 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>
该方法的请求方式为 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>
根据表单默认同步提交获取数据的方式
将数据内容序列化为指定格式的字符串内容
将数据内容序列化为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>
18 天前