JQuery+post+asp.net的三种方法 - 南南的博客

<head>
    <title>无标题页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="jquery/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="jquery/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <script src="jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="jquery/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="jquery/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script language ="javascript" type="text/javascript">
    $(function(){
       $('#p').dialog({  
       width:500,  
       height:150,  
       title: 'My Panel',  
       buttons: [{ 
       text:'登录', 
       //iconCls:'icon-add',  
       handler:function(){
            $.ajax({
            type: "POST",
            url: "Handler_login.ashx",
            dataType: "json",

            //方法一：用字符串连接的方式
            //data: "name="+$(Text1).val()+"&location="+$(Text2).val(),
            
            //方法二：直接获取input的内容可以用name获取，也可以用id
            //data:{
            //name : $('#p input[id=Text1]').val(),
            //pwd : $('#p input[id=Text2]').val()
            //},
            
            //方法三：JQuery的serialize()
            //这种方法一定要设置input中name的值，不然传参会出错
            //这种方法对于好几个参数的传递非常便捷
            data: $("form").serialize(),
            
            success: function(msg){
            alert( "Data Saved: " + msg[0].name);
            },
            error: function (xmlReq, err, c) {
                    alert("error:" + err);
            }
            });
       }  
       },{
       text:'注册',  
       //iconCls:'icon-save',  
       handler:function(){alert('save')}  
       }]  
       });
       
    })

    </script>
</head>

<div id="p" style="padding:10px;">  
<form>
    <p><input name="name" id="Text1" type="text" />panel content.</p>  
    <p><input name="pwd" id="Text2" type="text" />panel content.</p>
</form>  
</div>

前两种方法带不带<form>都无所谓，第三种一定要带<form>，另外，我们在JQuery中定义POST了，所以form里写不写method=post也无所谓了

下面文件，我写在ashx中

<%@ WebHandler Language="C#" Class="Handler_login" %>

using System;
using System.Web;
using System.Text;
public class Handler_login : IHttpHandler
{
    public string name ="";
    public string pwd = "";
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";//无格式正文
        if ((context.Request["name"] != null) && (context.Request["pwd"] != null))
        {
            this.name = context.Request["name"].ToString();
            this.pwd = context.Request["pwd"].ToString();
            
            context.Response.ContentType = "application/json;charset=utf-8";
            context.Response.Write(ToJson(new string[]{"name@"+name,"pwd@"+pwd}));
            //可以增加一个带bool值:context.Response.Write(ToJson(new string[] { "success@" + true, "name@" + name, "pwd@" + pwd }));
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

    public string ToJson(string[] array)
    {
        StringBuilder s = new StringBuilder(128);
        s.Append("[");
        for (int i = 0; i < array.Length; i++)
        {
            s.Append("{");
            s.Append("\"");
            s.Append(array[i].Split('@')[0]);
            s.Append("\"");
            s.Append(":");
            s.Append("\"");
            s.Append(array[i].Split('@')[1]);
            s.Append("\"");
            s.Append("}");
            if (i != (array.Length-1))
            s.Append(",");
        }
        s.Append("]");
        return s.ToString();
    }
}

ToJson 是为了生成Json用的,注意下，Json的格式为[{"name":"123"}.{"pwd":"123"}]，这里的必须用的双引号，不然JQuery就显示一个错误，收不到服务器端传回的数据.

posted on 2013-03-27 15:34 南南的博客阅读(214) 评论(0) 收藏举报

刷新页面返回顶部