jQuery/Ajax/PHP/Json 的一个综合例子

    jQuery 可以以 json 文件传输协议来传输数据(类似 xml，而且大有取代 xml 的趋势)，而网站后台代码必须与之配合使用。PHP 是用 json_encode 函数来对返回的数组数据进行编码的，但这个函数只有 PHP5.2版本以上才支持。

    从网上找到一个 json 的操作类，本人在 PHP4.4.7 版本下测试通过。本人还建了个函数 function my_json_encode($phparr)，使代码兼容 PHP5.2 以上版本。

    示例代码(包括 json 的类包软件)可以在以下网址下载：http://download.csdn.net/source/810895

    以下是全部代码：

< html >
< head >
< title > jQuery Ajax 实例演示 </ title >
</ head >
< script  language ="javascript"  src ="../lib/jquery.js" ></ script >
< script  language ="javascript" >

$(document).ready( function  ()
{
   $( ' #send_ajax ' ).click( function  (){
      var  params = $( ' input ' ).serialize();  // 序列化表单的值
     $.ajax({
       url: ' ajax_json.php ' ,  // 后台处理程序
       type: ' post ' ,          // 数据发送方式
       dataType: ' json ' ,      // 接受数据格式
       data:params,          // 要传递的数据
       success:update_page   // 回传函数(这里是函数名)
     });
   });

   // $.post()方式：
  $( ' #test_post ' ).click( function  (){
    $.post(
       ' ajax_json.php ' ,
      {
        username:$( ' #input1 ' ).val(),
        age:$( ' #input2 ' ).val(),
        sex:$( ' #input3 ' ).val(),
        job:$( ' #input4 ' ).val()
      },
       function  (data)  // 回传函数
      {
         var  myjson = '' ;
        eval( ' myjson= '   +  data  +   ' ; ' );
        $( ' #result ' ).html( " 姓名: "   +  myjson.username  +   " <br/>工作: "   +  myjson[ ' job ' ]);
      }
    );
   });

   // $.get()方式：
  $( ' #test_get ' ).click( function  ()
  {
    $.get(
       ' ajax_json.php ' ,
      {
        username:$( " #input1 " ).val(),
        age:$( " #input2 " ).val(),
        sex:$( " #input3 " ).val(),
        job:$( " #input4 " ).val()
      },
       function (data)  // 回传函数
      {
         var  myjson = '' ;
        eval( " myjson= "   +  data  +   " ; " );
        $( " #result " ).html(myjson.job);
      }
    );
  });
});

function  update_page (json)   // 回传函数实体，参数为XMLhttpRequest.responseText
{
   var  str = " 姓名: " + json.username + " <br /> " ;
  str += " 年龄: " + json.age + " <br /> " ;
  str += " 性别: " + json.sex + " <br /> " ;
  str += " 工作: " + json.job + " <br /> " ;
  str += " 追加测试: " + json.append;
  $( " #result " ).html(str);
}
</ script >
< body >

   < div  id ="result"  style ="background:orange;border:1px solid red;width:300px;height:200px;" ></ div >
   < form  id ="formtest"  action =""  method ="post" >
     < p >< span > 输入姓名: </ span >< input  type ="text"  name ="username"  id ="input1"   /></ p >
     < p >< span > 输入年龄: </ span >< input  type ="text"  name ="age"  id ="input2"   /></ p >
     < p >< span > 输入性别: </ span >< input  type ="text"  name ="sex"  id ="input3"   /></ p >
     < p >< span > 输入工作: </ span >< input  type ="text"  name ="job"  id ="input4"   /></ p >
   </ form >
   < button  id ="send_ajax" > 提交 </ button >
   < button  id ="test_post" > POST提交 </ button >
   < button  id ="test_get" > GET提交 </ button >

</ body >
</ html >

PHP 文件 ajax_json.php：

<? php
   // $arr = $_POST; //若以$.get()方式发送数据，则要改成$_GET.或者干脆:$_REQUEST
   $arr   =   $_REQUEST ;
   $arr [ ' append ' ]  =   ' 测试字符串 ' ;
   // print_r($arr);
   $myjson   =  my_json_encode( $arr );
   echo   $myjson ;
   function  my_json_encode( $phparr )
  {
     if ( function_exists ( " json_encode " ))
    {
       return  json_encode( $phparr );
    }
     else
    {
       require_once   ' json/json.class.php ' ;
       $json   =   new  Services_JSON;
       return   $json -> encode( $phparr );
    }
  }
?>

转载于:https://www.cnblogs.com/OneSpeak/articles/1659509.html