Jquery Ajax学习实例2-向页面发出请求,返回JSon格式数据

一、AjaxJson.aspx

  处理业务数据,产生JSon数据,供JqueryRequest.aspx调用,代码如下:

protected void Page_Load(object sender, EventArgs e)
    {
        string u = Request["UserName"];
        string p = Request["Password"];
        string output = string.Format("'UserName':'{0}','Password':'{1}'", u, p);

        Response.Write("[{");
        Response.Write(output);
        Response.Write("}]");
        Response.End();
    }

二、JqueryRequest.aspx
  通过点击按钮来请求AjaxJson.aspx,获取JSon数据。代码如下:

  

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" language="javascript" src="js/jquery-1.3.2.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" name="Text1" id="Text1"/><br />
        <input type="text" name="Text2" id="Text2"/>
        <br />
        <input type="button" id="btn1" οnclick="BtnClick()" />
    </div>
    <div id="dd">
        sd
    </div>
    <div>
        <script type="text/javascript" language="javascript">
            function BtnClick() {
                var uid = $("#Text1").val();
                var pwd = $("#Text2").val();

                $.ajax({
                    url: "AjaxJson.aspx",
                    type: "POST",
                    data: { UserName: uid, Password: pwd },
                    success: function(data) {
                        var json = eval(data); //eval("(" + data + ")");

                        $.each(json, function(idx, item) {
                            var user = item.UserName;
                            var pass = item.Password;
                            $("#dd").html("<h1>用户名:" + user + "  密码:" + pass + "</h1>");
                        });
                    }
                });
            }
        </script>
    </div>
    </form>
</body>
</html>

 

转载于:https://www.cnblogs.com/windy2008/archive/2010/03/15/1686293.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery是一种JavaScript库,ajax是一种能够向服务器端发送和接收请求的技术。在Web开发中,ajax技术可以让页面在不刷新的情况下向服务器请求数据,使得页面更加丰富和动态。 下面就是一个jQuery ajax请求实例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery Ajax Request</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <!--需要引入jQuery--> <script> $(document).ready(function() { $("#btn").click(function() { //当按钮被点击时 $.ajax({ url: "data.php", //请求地址 data: {"name":"Tom", "age":18}, //请求参数 type: "post", //请求方式 dataType: "json", //返回值类型 success: function(result) { //请求成功时的回调函数 $("#result").html(result.name + "今年" + result.age + "岁"); //将返回值显示在页面上 }, error: function() { //请求失败时的回调函数 alert("请求失败"); } }); }); }); </script> </head> <body> <button id="btn">请求数据</button><br><br> <div id="result"></div> </body> </html> ``` 在这个实例中,我们使用了jQueryajax函数,这个函数有很多参数,其中一些常用的参数包括: - url:请求地址; - data:请求参数; - type:请求方式(常用的有get和post); - dataType:返回值类型(常用的有json和html); - success:请求成功时的回调函数; - error:请求失败时的回调函数。 在按钮被点击时,我们向服务器请求数据,服务器通过data.php来处理请求,并返回一个json格式数据: ```php <?php $name = $_POST["name"]; $age = $_POST["age"]; $result = array("name" => $name, "age" => $age); echo json_encode($result); ?> ``` 当请求成功时,我们将返回数据解析出来,并将其显示在页面上。如果请求失败,我们就弹出一个提示框。通过这个实例,我们可以学习到如何使用jQuery来进行ajax请求,以及如何处理请求成功和失败的情况。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值