jQuery Ajax JSON传入和后台返回解析

浏览数：24 / 时间：2015年06月09日

参考http://stackoverflow.com/questions/19381111/how-to-encode-json-in-php-via-jquery-ajax-post-data

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="jQuery.js"></script>
</head>
    <script>
    $(document).ready(function(){
        var data1 = {‘account‘:‘demo‘,‘firstName‘:‘dog‘,‘email‘:‘xxx@xx‘};
        var strObj= JSON.stringify(data1);
        var data2= ["demo","data2"];
        var strObj2=JSON.stringify(data2);
        $(".btn1").click(function(event) {
            $.ajax({
                url: "response.php",
                type: "POST",
                //contentType:‘application/json‘,//u can not use this word or it will not work
                data:{amount:‘pics‘,firstName: ‘first‘,email:‘xxx@xx‘},
                dataType: ‘JSON‘,//定义了dataType是针对返回的数据类型的处理  不论是text还是JSON 发过去的数据格式都是一样的
                success: function(result) {
                    alert(result.countTotal);
                }
            });
        });
        //comes from http://www.jquery4u.com/ajax/jquery-php-ajax-json/
        //while read this http://stackoverflow.com/questions/10947483/submitting-json-data-via-jquery-ajax-post-to-php
        $(".btn2").click(function(event){

            $.ajax({
                url: ‘res2.php‘,
                type: ‘POST‘,
                dataType: ‘JSON‘,
                data:{data:JSON.stringify($(‘#form1‘).serializeArray())}//ok
            });
            
        });
        $(".btn3").click(function(event) {
            $.ajax({
                url: ‘res1.php‘,
                type: ‘GET‘,
                dataType: ‘JSON‘,
                data:{amount:‘pics‘,firstName: ‘first‘,email:‘xxx@xx‘}
            });
        });    
        $(".btn4").click(function(event) {
            $.ajax({
                url: ‘res3.php‘,
                type: ‘POST‘,
                dataType: ‘JSON‘,
                data: {data: strObj2}//send array
            });
            
        });
    });
    </script>
<body>
    <button class="btn1">xxxx</button>
    <button class="btn2">yyyy</button>
    <button class="btn3">zzzz</button>
    <button class="btn4">vvvv</button>
    <form id="form1">
        <input name="amount" value="qwe"/>
        <input name="firstName" value="first"/>
        <input name="email" value="xxx@xx"/>
    </form>
</body>
</html>

 

 

 

response.php

<?php
header(‘Content-Type: application/json‘);
$reqValue;
if (!empty($_POST["amount"])) {
    $reqValue=$_POST["amount"];
    if($reqValue==‘demo‘){
        $demo1 = array(
            ‘result‘ =>true,
            ‘countTotal‘=>2
            );
        echo json_encode($demo1);//{"result":true}    
    }else if ($reqValue==‘pics‘) {
        $picsList=array(
            "countTotal"=>2,
            "list"=> array(
                array(
                    ‘name‘ =>‘orabge.jpg‘,
                    ‘size‘=>1233123
                    ),
                array(
                    ‘name‘ =>‘apple.jpg‘ ,
                    ‘size‘=>73878 
                    )
                )
            );
        echo json_encode($picsList);


    }else{
        $msg = array(‘result‘ =>‘wrong‘ );
        echo json_encode($msg);
    }
}else{
    $msg = array(‘result‘ =>$_POST[‘data‘].‘rs‘ );
    echo json_encode($msg);
}



?>

res2.php

<?php
header(‘Content-Type: application/json‘);
$decoded = json_decode($_POST[‘data‘],true);
echo $decoded;
foreach ($decoded as $value) {
   echo $value["name"] . "=" . $value["value"];
}

// echo $decoded;
?>

res1.php

<?php
header(‘Content-Type: application/json‘);
echo $_GET[‘amount‘];
echo $_GET[‘firstName‘];
echo $_GET[‘email‘];
?>

 res3.php

<?php
header(‘Content-Type: application/json‘);
echo $_POST[‘data‘];

?>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： 代码 text htm html string c t word value js ip 代码 text htm html string c t word value js ip

相关文章

随机文章

您可能还喜欢

您可能还喜欢