jquery+json的6种ajax请求

简介:

跨域的方法

JSONP跨域GET请求
通过iframe实现跨域
flash跨域HTTP请求
window.postMessage

header实现跨域

serialize序列表表格内容为字符串,不支持form嵌套中的子form

HTML代码:

Java代码   收藏代码
  1. <form id="myform">  
  2. 姓名:<input type="text" name="name" size="10" />  
  3. 性别:<input type="radio" name="sex" value="男" />男  
  4. <input type="radio" name="sex" value="女" />女  
  5. <input type="submit" value="ok" />  
  6. </form>  
  7. <div id="rename"></div>  
  8. <div id="resex"></div>  
  9. <div id="re" style="display:none"></div>  

 show.php代码:

Java代码   收藏代码
  1. <?php  
  2. header("Cache-Control: no-cache, no-store, must-revalidate, max-age=-1");  
  3. header("Content-Type: application/json; charset=utf-8");  
  4. $user['name']="姓名:".$_REQUEST['name'];  
  5. $user['sex']="性别:".$_REQUEST['sex'];  
  6. echo json_encode($user);  
  7. ?>  

 第一种方式:1、jQuery.ajax(options) 可以实现同步

Java代码   收藏代码
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $(":submit").click(function () {  
  4.             var str = $("#myform").serialize();  
  5.             $.ajax({  
  6.                 url:"show.php",  
  7.                 type:"post",  
  8.                 data:str,  
  9.                 dataType:"json",  
  10.                 timeout:1000,  
  11.                 error:function () {  
  12.                     alert("ajax error!");  
  13.                 },  
  14.                 success:callback  
  15.             });  
  16.             return false;  
  17.         });  
  18.     });  
  19.     function callback(jsondata) {  
  20.         $("#rename").html(jsondata.name);  
  21.         $("#resex").html(jsondata.sex);  
  22.     }  
  23. </script>  

 第二种方式:2、load(url,data,callback)

Java代码   收藏代码
  1. <script type="text/javascript">  
  2. $(document).ready(function(){  
  3.     $(":submit").click(function(){  
  4.         var str=$("#myform").serialize();  
  5.         $("#re").load("show.php",str,function(jsondata){  
  6.             data=eval("("+jsondata+")");  
  7.             $("#rename").html(jsondata.name);  
  8.             $("#resex").html(jsondata.sex);  
  9.         });  
  10.         return false;  
  11.     });  
  12. });  
  13. </script>  

load方式可以在url后面加选择器的,语法形如 "url #some > selector",但这里的例子返回的数据是json格式,所以就不能加选择器,这里只是为了演示,所以就用一个隐藏的div来载入json数据,然后 在回调函数里显示出来,在实际项目中是不会这样整的。。。

 

第三种方式:3、jQuery.get(url,data,callback,type)

Java代码   收藏代码
  1. <script type="text/javascript">  
  2. $(document).ready(function(){  
  3.     $(":submit").click(function(){  
  4.         var str=$("#myform").serialize();  
  5.         $.get("show.php",str,function(jsondata){  
  6.             $("#rename").html(jsondata.name);  
  7.             $("#resex").html(jsondata.sex);  
  8.         },"json");  
  9.         return false;  
  10.     });  
  11. });  
  12. </script>  

 第四种方式:4、jQuery.getJSON(url,data,callback) 异步请求

Java代码   收藏代码
  1. <script type="text/javascript">  
  2. $(document).ready(function(){  
  3.     $(":submit").click(function(){  
  4.         var str=$("#myform").serialize();  
  5.         $.getJSON("show.php",str,function(jsondata){  
  6.             $("#rename").html(jsondata.name);  
  7.             $("#resex").html(jsondata.sex);  
  8.         });  
  9.         return false;  
  10.     });  
  11. });  
  12. </script>   

getJSON还可以通过JSONP协议来进行跨域调用数据。只要用jsonp方式就只能是get,因为本质是script方式加载的一个简单的例子:

a站www.a.com 下放置一个调用页面client.html,代码:

Java代码   收藏代码
  1. <script type="text/javascript">  
  2. $.getJSON("http://www.b.com/server.php?name=jackie&sex=boy&callback=?",function(data){  
  3.     alert(data.name+" "+data.sex);  
  4. });  
  5. </script>  

 b站www.b.com 下放置返回json的php文件 server.php,代码:

Java代码   收藏代码
  1. <?php  
  2.     $name=$_REQUEST['name'];  
  3.     $sex=$_REQUEST['sex'];  
  4.     $jsondata="{name:'".$name."',sex:'".$sex."'}";  
  5.     echo $_GET['callback']."(".$jsondata.")";  
  6. ?>  
Java代码   收藏代码
  1. callback({name:'this is json data',sex:'男'})  

 header实现跨域

Server.php代码   收藏代码
  1. <?php  
  2. // ajax通过设置Access-Control-Allow-Origin来实现跨域访问比较简单.指定允许其他域名访问  
  3. header('Access-Control-Allow-Origin:*');  
  4. // 响应类型  
  5. header('Access-Control-Allow-Methods:POST, GET, OPTIONS');  
  6. // 响应头设置  
  7. header('Access-Control-Allow-Headers:x-requested-with,content-type');  

 

第五种方式:5、jQuery.post(url,data,callback,type)

Java代码   收藏代码
  1. <script type="text/javascript">  
  2. $(document).ready(function(){  
  3.     $(":submit").click(function(){  
  4.         var str=$("#myform").serialize();  
  5.         $.post("show.php",str,function(jsondata){  
  6.             $("#rename").html(jsondata.name);  
  7.             $("#resex").html(jsondata.sex);  
  8.         },"json")  
  9.         return false;  
  10.     });  
  11. });  
  12. </script>  

 第六种方式:jQuery.getScript(url,[callback])

Js代码   收藏代码
  1. <html>  
  2. <head>  
  3. <title>JQuery学习</title>  
  4. <script src="jquery-1.2.6.min.js" type="text/javascript"></script>  
  5. <script type="text/javascript">  
  6. $(document).ready(function(){  
  7.     var oBtnTest = $("#btnTest");  
  8.     oBtnTest.click(function(){  
  9.         oBtnTest.disabled = true;  
  10.         var oResult = $("#result");  
  11.         oResult.html("loading").css("color","red");  
  12.         jQuery.getScript("http://app.cntvs.com/test/js.txt",  
  13.         function(){  
  14.             oResult.html("name:" + jimmy.name + "<br/>email:" + jimmy.email).css("color","black");  
  15.             oBtnTest.disabled = false;  
  16.         });  
  17.     });  
  18. });  
  19. </script>  
  20. </head>  
  21. <body>  
  22. <button id="btnTest">BtnTest</button>  
  23. <div id="result"></div>  
  24. </body>  
  25. </html>  

 远程服务器端js.txt的内容为:
var jimmy = {name:"jimmy.yang",email:jimmy.yang@163.com}

getScript是通过 HTTP GET 请求载入并执行一个 JavaScript 文件。很简单,而且在当前的例子中不适用,所以略过。 ps:php判断是否为ajax请求可以用$_SERVER['HTTP_X_REQUESTED_WITH'],如 if(strtolower($_SERVER['HTTP_X_REQUESTED_WITH'])=='xmlhttprequest') return true; }

相关文章
|
1月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
24 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
20天前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
|
27天前
|
前端开发 Python
Django框架中Ajax GET与POST请求的实战应用
Django框架中Ajax GET与POST请求的实战应用
|
1月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
1月前
|
JSON JavaScript 前端开发
jQuery获取json文件的方法
jQuery获取json文件的方法
18 2
|
14天前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch(&#39;url&#39;).then(r =&gt; r.json()).then(data =&gt; console.log(data)).catch(err =&gt; console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
|
1月前
|
XML JSON 前端开发
第十一篇JavaScript JSON与AJAX
第十一篇JavaScript JSON与AJAX
15 0
|
2月前
|
JSON 前端开发 JavaScript
Fetch API与Ajax请求
Fetch API是JavaScript的一种新方法,用于网络请求,提供简洁的Promise-based语法和更多功能,如处理头、取消请求及跨域支持,比Ajax更强大。尽管不完全替代Ajax,尤其在老浏览器或需要底层控制时,Fetch API仍是现代浏览器中获取资源的优选工具。例如,以下代码展示了如何使用Fetch API进行GET和POST请求。
|
1月前
|
JSON 前端开发 JavaScript
Django——Ajax请求
Django——Ajax请求
|
2月前
|
XML JSON 前端开发
Ajax – JSON入门指南
Ajax – JSON入门指南
25 1