php基于jquery的ajax技术传递json数据简单实例
2016-08-26来源:

本文实例讲述了php基于jquery的ajax技术传递json数据简单实现方法。分享给大家供大家参考,具体如下:

html页面:

<html>

<head>

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

<script type="text/javascript" src="//www.submisscin.com/wap/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程序设计有所帮助。

推荐信息
Baidu
map