jQuery Ajax json 資料提供儲存代碼

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<html>
<head>
<title>jquery ajax 網頁特效on 資料提供儲存代碼</title>
</head>

<script language="網頁特效" src="jquery.js"></script>
<script language="網頁特效">
$(document).ready(function ()
{
   $('#send_ajax').click(function (){
     var params=$('input').serialize(); //序列化表單的值
     alert(params);
$.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>

ajax_json.php 檔案
<?php

//$arr = $_post; //若以$.get()方式發送資料，則要改成$_get.或者乾脆:$_request
$arr = $_request;
$arr['append'] = '錢';

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

?>
jquery.js檔案到官網下載就ok了

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More