DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> jQuery Ajax PHP Json 的一個綜合例子
jQuery Ajax PHP Json 的一個綜合例子
編輯:AJAX詳解     

jQuery 是一個非常優秀的 Javascript 框架,對 JS 進行了優秀的包裝,提供了許多方便的功能。jQuery 對 AJax 的包裝也是非常優秀

jQuery 可以以 JSon 文件傳輸協議來傳輸數據(類似 xml,而且大有取代 XML 的趨勢),而網站後台代碼必須與之配合使用。PHP 是用 JSon_encode 函數來對返回的數組數據進行編碼的,但

這個函數只有 PHP5.2版本以上才支持。

從網上找到一個 json 的操作類,本人在 PHP4.4.7 版本下測試通過。本人還建了個函數 function my_JSon_encode($phparr),使代碼兼容 PHP5.2 以

上版本。

以下是全部代碼:

<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);
    }
  }
?>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved