php+ajax+json 详解及实例代码


Posted in PHP onDecember 12, 2016

php+ajax+json 实例代码

html页面:

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
 $(function(){
   $("#send").click(function(){
    var cont = $("input").serialize();
    $.ajax({
      url:'ab.php',
      type:'post',
      dataType:'json',
      data:cont,
      success:function(data){
       var str = data.username + data.age + data.job;
       $("#result").html(str);
    }
  });
 }); 
 });
</script>
</head>
<body>
<div id="result">一会看显示结果</div>
<form id="my" action="" method="post">
      <p><span>姓名:</span> <input type="text" name="username" /></p>
     <p><span>年龄:</span><input type="text" name="age" /></p>
     <p><span>工作:</span><input type="text" name="job" /></p>
</form>
<button id="send">提交</button>
</body>
</html>

 php页面:

<?php
header("Content-type:text/html;charset=utf-8");
    $username = $_POST['username'];
    $age = $_POST['age'];
    $job = $_POST['job'];
    $json_arr = array("username"=>$username,"age"=>$age,"job"=>$job);
    $json_obj = json_encode($json_arr);
    echo $json_obj;
?>

使用post方式

<script type="text/javascript">
 $(function(){
 $("#send").click(function(){
   var cont = {username:$("input")[0].value,age:$("input")[1].value,job:$("input")[2].value};
   var url = 'ab.php';
   $.post(url,cont,function(data){
    var res = eval("(" + data + ")");//转为Object对象
   var str = res.username + res.age + res.job;
  $("#result").html(str);
  });
 }); 
 });
</script>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

PHP 相关文章推荐
用PHP编程开发“虚拟域名”系统
Oct 09 PHP
PHP开发入门教程之面向对象
Dec 05 PHP
深入PHP中的HashTable结构详解
Jun 13 PHP
php模拟用户自动在qq空间发表文章的方法
Jan 07 PHP
PHP输出缓冲控制Output Control系列函数详解
Jul 02 PHP
分享PHP函数实现数字与文字分页代码
Jul 28 PHP
PHP面向对象程序设计类的定义与用法简单示例
Dec 27 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
Feb 08 PHP
php实现自定义中奖项数和概率的抽奖函数示例
May 26 PHP
PHP中的日期时间处理利器实例(Carbon)
Jun 09 PHP
PHP实现百度人脸识别
May 06 PHP
php使用pecl方式安装扩展操作示例
Aug 12 PHP
解决微信授权回调页面域名只能设置一个的问题
Dec 11 #PHP
Zend Framework数据库操作方法实例总结
Dec 11 #PHP
smarty模板数学运算示例
Dec 11 #PHP
Zend Framework入门应用实例详解
Dec 11 #PHP
Zend Framework前端控制器用法示例
Dec 11 #PHP
Zend Framework路由器用法实例详解
Dec 11 #PHP
Zend Framework分发器用法示例
Dec 11 #PHP
You might like
桌面中心(四)数据显示
2006/10/09 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
点击进行复制的JS代码实例
2013/08/23 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
require.js的用法详解
2015/10/20 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
应届生的求职推荐信范文
2013/11/30 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
养成教育经验材料
2014/05/26 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
化验室岗位职责
2015/02/14 职场文书
学生会自荐信
2019/05/16 职场文书
2019新员工心得体会
2019/06/25 职场文书
小学记事作文之200字
2019/08/06 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL