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
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
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
浅谈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 =
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 =
相关文章
- 自己动手丰衣足食之表格排序插件jquery.tableSort.js
- jQuery显示隐藏密码插件jquery.toggle-password演示
- JQuery 获得元素的方法
- Thinkphp学习日记:jQuery_ajax数据提交
- 实例解析java + jQuery + json工作过程(获取JSON数据)
- Ajax jquery的库的简化版本
- jQuery源码分析系列(31) : Ajax deferred实现
- jQuery源码分析系列(30) : Ajax 整体结构
- jquery ajax(实现单独提交某个form)
- 原生JS实现JQuery的addClass和removeClass
- 第一百七十四节,jQuery,Ajax进阶
- 第一百七十三节,jQuery,Ajax
- jquery中页面Ajax方法$.load的功能
- 对象拷贝:jQuery extend
- jQuery插件开发详细教程
- jQuery:获取浏览器中的分辨率
- jquery通过ajax提交form
- Jquery焦点图/幻灯片效果 插件 KinSlideshow
- Jquery.ajax报parseerror Invalid JSON错误的原因和解决方法:不能解析
- JQuery模板插件jquery.tmpl-动态ajax扩展
- jQuery ajax简单案例-验证用户名是否可用
- jQuery学习笔记
- SAP UI5应用里使用jQuery.ajax异步读取xml文档并显示在SAP UI5应用界面上
- jQuery UI API 类别 - 主题(Theming)
- jQuery UI CSS 框架 API
- jQuery UI 主题
- Ajax+json+jquery实现无限瀑布流布局
- 【jQuery】jQuery中如何发送ajax请求以及解决跨域问题_10
- jQuery ajax读取本地json文件_jQuery请求本地JSON文件,在谷歌浏览器运行时报跨域错误_Vscode使用Live Server