jquery/ajax/php/json实例

最新推荐文章于 2024-11-11 19:29:13 发布

shaily

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量4.1k

点赞数

分类专栏： Jquery LINQ Ajax专辑 Jquery .NET 文章标签： function javascript json input ajax 工作

.NET 同时被 3 个专栏收录

301 篇文章 1 订阅

订阅专栏

Ajax专辑

23 篇文章 0 订阅

订阅专栏

Jquery

16 篇文章 0 订阅

订阅专栏

工具: 1.jquery-132min.js 2. JSON.class.php.php5 json.htm -------------------------------------------------------------------------------- html head title jQueryAjax实例演示 / title / head script language = javascript src = lib/jquery-

工具: 1. jquery-132min.js
2. JSON.class.php.php5

  
  json.htm  
 
--------------------------------------------------------------------------------  
<html> 
<head> 
<title>jQuery Ajax 实例演示</title> 
</head> 
<script language="javascript" src="lib/jquery-132min.js"></script> 
<script language="javascript"> 
$(document).ready(function ()  
{  
   $('#send_ajax').click(function (){  
     var params=$('input').serialize(); //序列化表单的值  
     $.ajax({  
       url:'ajax/ajax_json.php', //后台处理程序  
       type:'post',         //数据发送方式  
       dataType:'json',     //接受数据格式  
       data:params,         //要传递的数据  
       success:update_page //回传函数(这里是函数名)  
     });  
   });  
//$.post()方式：  
$('#test_post').click(function (){  
    $.post(  
      'ajax/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/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'] = '测试字符串';  
//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 'ajax/JSON.class.php.php5';  
      $json = new JSON;  
      return $json->encode($phparr);  
    }  
}  
?>