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

技术  /  管理员 发布于 4年前   2005

php+ajax+json 实例代码


html页面：


<html>

<head>

<meta http-equiv="content-type" content="text/html;" />


<script type="text/javascript" src="//article/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">一会看显示结果

<form id="my" action="" method="post">      

<p><span>姓名：</span> <input type="text" name="username" /></p>     

<p><span>年龄：</span><input type="text" name="age" /></p><a href="https://www.zongscan.com/"></a>     

<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>


                                                               



  • 上一条：
    laravel5.7+GuzzleHttp模拟curl通过公钥RSA加密后发起api请求
    下一条：
    nginx中500，501，502，503，504，505状态码的详解及出现的原因/区别

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客