jquery解析返回的json数据小试

原创
2012/04/09 11:30
阅读数 356

common.js:

$(function(){
    $('#submit').click(function(){
        $.ajax({
            type: "POST",
            url: "do.php",
            data: $('#myform').serialize(),
            success: function(msg){
                var obj = jQuery.parseJSON(msg);
                alert(obj.data1+obj.data2+obj.data3+obj.data4+obj.data5+obj.data6+obj.data7);
            }
        });
    })
})

do.php:

<?php
echo json_encode($_POST);

?>

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test jquery parse json</title>
<script src='jquery.js'></script>
<script src='common.js'></script>
</head>
<style>
form{ width:400px;background:#d4d4d4;margin:100px auto 0;}
form input[type='text']{ width:300px; }
form div{margin-bottom:20px;}
</style>
<body>
<form id='myform'>
 <div>data1:<input type='text' name='data1' /></div>
<div>data2:<input type='text' name='data2' /></div>
<div>data3:<input type='text' name='data3' /></div>
<div>data4:<input type='text' name='data4' /></div>
<div>data5:<input type='text' name='data5' /></div>
<div>data6:<input type='text' name='data6' /></div>
<div>data7:<input type='text' name='data7' /></div>
<div><input type='button' id='submit' value='提交' /></div>
</form>
</body>
</html>

备注:访问index.html,往表单输入数据,点击提交即可看到效果……

展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部