jquery ajax发送json数据并接收json进行遍历

axl234

浏览: 260025 次
性别:
来自: 北京

最近访客更多访客>>

ShaLongBus

398466028

54931104

qq22903594

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript
jquery

页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>客户端和服务器端使用JSON示例</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
.style1 {
width: 568px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div> 用户名
    <input type="text" name="Text1" id="Text1"/>
    <br />
    密码
    <input type="text" name="Text2" id="Text2"/>
    <br />
    <br />
    <input type="button" id="btn1" onclick="BtnClick()" value="确定" />
</div>
<div id="dd"> sd </div>
<div>
    <script type="text/javascript">
function BtnClick() {
var uid = $("#Text1").attr("value");
var pwd = $("#Text2").attr("value");

$.ajax({
url: "server.php",
type: "post",
data: { UserName: uid, Password: pwd },
/**/

/*第二种方法遍历json数据*/
success: function(data) {
var json =eval("["+data+"]");//这里中间的括号为中括号使数据类似[{"username":"张三","content":"沙发"}];的格式
$.each(json, function(idx, item) {
var user = item.userName;
var pass = item.password;
$("#dd").html("<h1>用户名：" + user + " 密码：" + pass + "</h1>");
});
}
});
}
</script>
</div>
</form>
</body>
</html>

php代码：

<?php
$myName =$_REQUEST["UserName"];
$myEmail = $_REQUEST["Password"];
$arr=array(
userName=>$myName,
password=>$myEmail
);
$message = json_encode($arr);
echo $message;
?>

如果使用getJSON方式遍历数据，如下

$(function(){
    $("#Button1").bind("click",function(){
   var data = "name=" + $("#txtname").attr("value");
                data += "&email=" + $("#txtemail").attr("value");
                data += "&t1=" + $("#txthomephone").attr("value");
                data += "&t2=" + $("#txtmobilephone").attr("value");
        $.getJSON("server.php",data, function(json){
            $("#name").html(json.Name);
            $("#email").html(json.Email);
            $("#t1").html(json.PhoneNumbers.HomePhone);
            $("#t2").html(json.PhoneNumbers.WorkPhone);

       });
    });
});

分享到：

jquery map方法的应用 | javascript高级应用

2012-05-03 14:58
浏览 3227
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论