jquery ajax post方法获取json数据
2015-11-27 12:53
591 查看
前端
$(document).ready(function () { $("#btn").click(function () { var price = $("#price").val(); $.post("ajax.php", {"symbol": price}, function (data, textstatus) { $("#heigh").html(data.h); $("#midle").html(data.m); $("#low").html(data.l); }) }) })
</script><form> <input type="text" id="price"> <input type="button" id="btn" value="submit"></form><div>heigh:<span id="heigh"> </span></div><div>midle:<span id="midle"> </span></div><div>low:<span id="low"> </span></div></body></html>
php
$k =$_POST["symbol"];
switch($k){
case 'msft':
$v=array("h"=>"100" , "m"=>"80" , "l"=>"50");
break;
case 'goog':
$v=array("h"=>"200" , "m"=>"180" , "l"=>"150");
break;
case 'aapi':
$v=array("h"=>"300" , "m"=>"280" , "l"=>"250");
break;
}
$json=json_encode($v);
header("content-type:application/json");
echo $json;
?>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>无标题文档</title> <script src="images/jquery.min.js"></script> </head> <body> <script> /* $.post函数 */
$(document).ready(function () { $("#btn").click(function () { var price = $("#price").val(); $.post("ajax.php", {"symbol": price}, function (data, textstatus) { $("#heigh").html(data.h); $("#midle").html(data.m); $("#low").html(data.l); }) }) })
/* $.ajax函数 */
/* $(document).ready(function () { $("#btn").click(function () { $.ajax({ type: "POST", url: "ajax.php", data: {"symbol": $("#price").val()}, datatype: "json", success: function (data) { $("#heigh").html(data.h); $("#midle").html(data.m); $("#low").html(data.l); } }); }); });*/
</script><form> <input type="text" id="price"> <input type="button" id="btn" value="submit"></form><div>heigh:<span id="heigh"> </span></div><div>midle:<span id="midle"> </span></div><div>low:<span id="low"> </span></div></body></html>
php
<?php
$k =$_POST["symbol"];
switch($k){
case 'msft':
$v=array("h"=>"100" , "m"=>"80" , "l"=>"50");
break;
case 'goog':
$v=array("h"=>"200" , "m"=>"180" , "l"=>"150");
break;
case 'aapi':
$v=array("h"=>"300" , "m"=>"280" , "l"=>"250");
break;
}
$json=json_encode($v);
header("content-type:application/json");
echo $json;
?>
相关文章推荐
- 一个完全独立的、简洁的jquery前端分页组件,用到动态添加页内样式的方法哦。
- 二级下拉菜单的三种实现方法——CSS 、JS、 jQuery
- jquery操作select(取值,设置选中)
- jQuery on()方法
- 拓展jQuery的serialize(),将form表单转化为json对象。
- 基于JQUERY的WEB在线流程图设计器GOOFLOW 0.5版
- jquery 显示“加载状态 结束”
- jquery与ajax应用
- jQuery/JSON
- jquery 多select 选中值验证
- 关于jquery formValidator表单验证插件的使用
- 基于Jquery实现仿百度百科右侧导航代码附源码下载
- 通过jquery来实现文本框和下拉框动态添加效果,能根据自己的需求来自定义最多允许添加数量,实用的jquery动态添加文本框特效
- jquery实现两边飘浮可关闭的对联广告
- jquery图片轮播
- 每个程序员都会的35个jQuery技巧
- 悬浮时显示二级列表jquery
- jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
- jquerymobile API
- jQuery自定义插件