zl程序教程

您现在的位置是:首页 >  前端

当前栏目

jquery+json的6种ajax请求

2023-09-14 08:59:48 时间
姓名: input type="text" name="name" size="10" /    性别: input type="radio" name="sex" value="男" / 男   input type="radio" name="sex" value="女" / 女   input type="submit" value="ok" /    /form    div id="rename" /div    div id="resex" /div    div id="re"  /div   
header("Cache-Control: no-cache, no-store, must-revalidate, max-age=-1");   header("Content-Type: application/json; charset=utf-8");   $user[name]="姓名:".$_REQUEST[name];   $user[sex]="性别:".$_REQUEST[sex];   echo json_encode($user);  
        $(":submit").click(function () {               var str = $("#myform").serialize();               $.ajax({                   url:"show.php",                   type:"post",                   data:str,                   dataType:"json",                   timeout:1000,                   error:function () {                       alert("ajax error!");                   },                   success:callback               });               return false;           });       });       function callback(jsondata) {           $("#rename").html(jsondata.name);           $("#resex").html(jsondata.sex);       }   /script   
        var str=$("#myform").serialize();           $("#re").load("show.php",str,function(jsondata){               data=eval("("+jsondata+")");               $("#rename").html(jsondata.name);               $("#resex").html(jsondata.sex);           });           return false;       });   });   /script   

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

 

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


        var str=$("#myform").serialize();           $.get("show.php",str,function(jsondata){               $("#rename").html(jsondata.name);               $("#resex").html(jsondata.sex);           },"json");           return false;       });   });   /script   
        var str=$("#myform").serialize();           $.getJSON("show.php",str,function(jsondata){               $("#rename").html(jsondata.name);               $("#resex").html(jsondata.sex);           });           return false;       });   });   /script    

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

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


script type="text/javascript"    $.getJSON("http://www.b.com/server.php?name=jackie sex=boy callback=?",function(data){       alert(data.name+" "+data.sex);   });   /script   
    $jsondata="{name:".$name.",sex:".$sex."}";       echo $_GET[callback]."(".$jsondata.")";  
?php   // ajax通过设置Access-Control-Allow-Origin来实现跨域访问比较简单.指定允许其他域名访问   header(Access-Control-Allow-Origin:*);   // 响应类型   header(Access-Control-Allow-Methods:POST, GET, OPTIONS);   // 响应头设置   header(Access-Control-Allow-Headers:x-requested-with,content-type);  
        var str=$("#myform").serialize();           $.post("show.php",str,function(jsondata){               $("#rename").html(jsondata.name);               $("#resex").html(jsondata.sex);           },"json")           return false;       });   });   /script   
title JQuery学习 /title    script src="jquery-1.2.6.min.js" type="text/javascript" /script    script type="text/javascript"    $(document).ready(function(){       var oBtnTest = $("#btnTest");       oBtnTest.click(function(){           oBtnTest.disabled = true;           var oResult = $("#result");           oResult.html("loading").css("color","red");           jQuery.getScript("http://app.cntvs.com/test/js.txt",           function(){               oResult.html("name:" + jimmy.name + " br/ email:" + jimmy.email).css("color","black");               oBtnTest.disabled = false;           });       });   });   /script    /head    body    button id="btnTest" BtnTest /button    div id="result" /div    /body    /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; }


浅谈Ajax请求中的GET,POST,PUT,DELETE,PATCH,OPTIONS 浅谈Ajax请求中的GET,POST,PUT,DELETE,PATCH,OPTIONS 在日常的前后端交互,数据请求中最长用的就是Ajax,当然在面试时也经常会被问道请求的方式有哪些?分别什么不同?一般我们都会回答GET请求和POST请求,但其实在后端配置接口时,请求方式不仅这两种,还会有PUT,DELETE,PATCH等,当然我们在开发的时候偶尔也会遇到接口要求使用这几种方式进行请求,下面我们就来讲一讲这几种方式分别有什么不同。 首先先要了解http定义与服务器进行交互的方式,其中基本的有GET,POST,PUT,DELETE,PATCH是后增的方式。同时还要知道URL代表的是 统一资源
详细解析Ajax的使用之向服务器发送GET请求 详细解析Ajax的使用之向服务器发送GET请求 上篇文章讲的如何使用Ajax发送get请求,这篇文章说如何使用Ajax发送post请求。 HTML代码: h1 ajax的post请求 /h1 button id= btn 发送请求 /button JavaScript代码: var oBtn = document.getElementById( btn // 1.初始化请求对象 var xhr; if (window.XMLHttpRequest) { xhr = new XML
详细解析Ajax的使用之向服务器发送GET请求 详细解析Ajax的使用之向服务器发送GET请求 前面一篇博客我们讲到了如何使用form表单像服务器发送请求,但是请求方式是同步的,效率太低,现在我们讲一下如何使用Ajax的技术向服务器发送异步请求。 HTML代码: h1 ajax的get请求 /h1 button id= btn 获取数据 /button p 姓名: span id= user /span /p p 年龄: span id= age /span /p JavaScript代码: var oBtn =