jquery中的几种常用总结
$.load方法
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
/*load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。
url:你需要载入的代码的URL地址 语法形式如：url #some > selector 可以对html进行筛选
data:（可选）参数的传递 语法形式如: {"argName":"argValue"} es:{"id":"123","sex":"男"}
callback （可选）回调函数
这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。*/
$(function(){
var name = 'gaofei';
$('#button1').click(function(){
//get传参方法
//$('#box').load('2.php?name'+name);
//post传参方法
$('#box').load('2.php',{name:name , password:'123'} ,
//response传输对象
function(response , status , xhr){
//回调过来的值进行重新编写
if(status == 'success')
{
$('#box').html(response+name);
}
else
{
$('#box').html(response);
}
});
})
})
</script>
<button type="button" name="button" id="button1">异步加载数据</button>
<div id="box"></div>
$.get方法
<script type="text/javascript">
/*
get(url,data,callback,type)
前三个参数跟load参数相同
type即服务器返回的内容格式：
*/
$(function(){
/*//通过直接在url问号紧跟传参
$('#button1').click(function(){
var name = 'gaofei';
var password = '123';
$.get('2.php?name='+name+'&password='+password,function(response , status , xhr){
$('#box').html(response);
})
})*/
/*//通过第二个参数data，字符串形式的键值对传参，然后自动转换为问号紧跟传参
$('#button1').click(function(){
var name = 'gaofei';
var password = '123';
$.get('2.php','name='+name+'&password='+password,function(response , status , xhr){
$('#box').html(response);
})
})*/
/*//通过第二个参数data，对象形式的键值对传参，然后自动转换为问号紧跟传参
$('#button1').click(function(){
var name = 'gaofei';
var password = '123';
$.get('2.php',
{
name:name,
password:password
}
,function(response , status , xhr){
$('#box').html(response);
})
})*/
})
</script>
</head>
<body>
<button type="button" name="button" id="button1">ajaxGET方法</button>
<div id="box"></div>
$.post方法
<script type="text/javascript">
//ajax post方法
/*$.post()方法的使用和$.get()基本上一致，他们之间的区别也比较隐晦，基本都是背后的
不同，在用户使用上体现不出。具体区别如下：
1.GET 请求是通过 URL 提交的，而 POST 请求则是 HTTP 消息实体提交的；
2.GET 提交有大小限制（2KB） ，而 POST 方式不受限制；
3.GET 方式会被缓存下来，可能有安全性问题，而 POST 没有这个问题；
4.GET 方式通过$_GET[]获取，POST 方式通过$_POST[]获取。*/
$(function(){
/*//通过第二个参数data，对象形式的键值对传参，然后自动转换为post传参
$('#button1').click(function(){
var name = 'gaofei';
var password = '123';
$.post(
'2.php',
{
name:name,
password:password
},
function(response , status , xhr){
$('#box').html(response);
})
})*/
/*//post最常用的方法
//通过第二个参数data ， 字符串形式的键值对传参，自动转换为http消息实体传参
$('#button1').click(function(){
var name = 'gaofei';
var password = '123';
$.post(
'2.php',
'name='+name+'&password='+password,
function(response , status , xhr){
$('#box').html(response);
},
'html'); //php文件返回的数据是纯文本 默认为html或者text
})*/
/*//post最常用的方法
//通过第二个参数data ， 字符串形式的键值对传参，自动转换为http消息实体传参
$('#button1').click(function(){
var name = 'gaofei';
var password = '123';
$.post(
'2.php',
'name='+name+'&password='+password,
function(response , status , xhr){
$('#box').html(response);
},
'json');
//本身返回的是纯文本,如果强行转换为xml或json数据格式，将会导致无法获取数据
})*/
})
</script>
$.ajax方法
<script type="text/javascript">
//$.ajax()是所有 ajax 方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。
//这个方法只有一个参数，传递一个各个功能键值对的对象。
$(function(){
$('#button1').click(function(){
var name = $('#username').val();
$.ajax({
type:'POST', //请求方式 POST OR GET
url:'2.php', //请求地址
data:{ //发送到服务器的数据，键值对，字符串，对象
name:name,
},
dataType:'json',
success:function(data){
if(data.err == 1)
{
roleerr('<strong>错误：</strong> 库中已经存在此用户名！');
return false;
}
}
})
})
})
function roleerr(a)
{
$('#warningerrmsg').html(a);
$('#warningerr').show();
window.scrollTo(0,0);
}
</script>
</head>
<body>
<div role="alert" id="warningerr" style="display: none;">
<div id="warningerrmsg"><strong>错误：</strong> 角色名重复</div>
</div>
<form name="form1" id="form1" action="2.php" method="post">
<h1>用户名：<input type="text" name="username" id="username"></h1><br />
<h1>密码：<input type="text" name="password" id="password"></h1>
<button type="button" name="button" id="button1">Ajax方法</button>
</form>
<div id="box"></div>
浙公网安备 33010602011771号