【js与jquery】jquery对返回json格式数据的处理和解析

【js与jquery】jquery对返回json格式数据的处理和解析

分类： 《js与jquery》 《php》 2012-09-03 01:36 88人阅读 评论(0) 收藏 举报

1.php代码：

<?php
    header("Content-Type:text/html; charset=utf-8");
    //一般情况下，使用json_encode()函数生成json格式的字符串
    echo "{ username : \"{$_REQUEST['username']}\" , content : \"{$_REQUEST['content']}\"}";
?>

2.html代码：

<form id="form1" action="#">
    <p>评论:</p>
    <p>姓名: <input type="text" name="username" id="username" /></p>
    <p>内容: <textarea name="content" id="content"  rows="2" cols="20"></textarea></p>
    <p><input type="button" id="send" value="提交"/></p>
</form>

<div class='comment'>已有评论：</div>
<div id="resText" ></div>

3.jquery代码：

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
1.json格式数据的出现，很大程度上是因为xml文档体积大和难以解析。json文件和xml文档一样，也可以方便的被重用
2.json文件非常简洁，也便于阅读和解析
3.json格式的数据非常严格，任何一个括号的不匹配或者缺少逗号，都会导致页面上的脚本终止运行，甚至还会带来其它更加严重的负面影响，这一点没有xml格式的数据好
*/
$(function(){
       $("#send").click(function(){
            $.get("get3.php", {
                        username :  $("#username").val() ,
                        content :  $("#content").val()
                    }, function (data, textStatus){
                        var username = data.username;
                        var content = data.content;
                        var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
                        $("#resText").html(txtHtml); // 把返回的数据添加到页面上
                    },"json");//参数4-代表期待服务器端返回的数据格式为json格式
       })
})
</script>