jQueryAjax例項演示

y0umer發表於2011-04-26
jQuery


<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);
    }
}
?>


相關文章