$.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>