jQuery Ajax请求 .net 一般处理程序

Posted SoftWareIe

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery Ajax请求 .net 一般处理程序相关的知识,希望对你有一定的参考价值。

初学ajax 一个简单的功能,调试了2个小时,代码如下虽然成功了 但是有错误 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <script src="scripts/jquery-1.11.3.min.js"></script>

    <script>
        $(function () {
            $("#btnLogin").click(function () {

                if ($("#txtName").val() == "") {
                    alert("用户名不能为空");
                    return false;
                }

                $.ajax({ 
                    type: POST,
                    url: "Login.ashx",
                    data: { userName: $("txtName").val(), userPwd: $("txtPwd").val() },
                    success: function (data) {
                        alert(data);
                    },
                    datatype:Text
                })
            })
        })
    </script>
</head>
<body class="container">

    <div class="group">
        <label class="control-label">用户名</label>
        <input id="txtName" class="form-control" name="txtName" />

    </div>
    <div class="group">
        <label class="control-label">密码</label>
        <input id="txtPwd" class="form-control" name="txtPwd" />

    </div>

    <button id="btnLogin" class="btn-group" name="btnLogin">登录</button>
    <button id="btnReset" class="btn-group" name="btnReset">重置</button>
</body>
</html>

后台就是 新建 个一般处理程序 helloword

后来 dataType 换成 json 结果就不对了

在测试发现。。。json要用引号引起来 

看文档

dataType

类型:String

预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 javascript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:

  • "xml": 返回 XML 文档,可用 jQuery 处理。
  • "html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
  • "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
  • "json": 返回 JSON 数据 。
  • "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
  • "text": 返回纯文本字符串

字符串。。。字符串。。。字符串 重要的事说三便 也就是 我前边的text也是错的 虽然 出来了正确的结果 

 

再说第二个问题 传过去后登录 收不到值 。。。。又检查 。。。。$("txtName")少个#号 。。这是一个id啊 这是一个id

最后前台成这样了

技术分享图片
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <script src="scripts/jquery-1.11.3.min.js"></script>

    <script>
        $(function () {
            $("#btnLogin").click(function () {

                if ($("#txtName").val() == "") {
                    alert("用户名不能为空");
                    return false;
                }

                var username = $("#txtName").val();
                var userpwd =$("#txtPwd").val();

                //$.ajax({ 
                //    type: ‘POST‘,
                //    url: "Login.ashx",
                //    data: {userName: $("txtName").val(),userPwd: $("txtPwd").val() },
                //    success: function (data) {
                //        alert(data);
                //    }
                //    //datatype:"json"
                //})

                alert(username+userpwd);
                

                $.post("Login.ashx", { UserName:username, UserPass:userpwd  }, function (result) {
                    alert(result);
                });

           
            })
        })
    </script>
</head>
<body class="container">

    <div class="group">
        <label class="control-label">用户名</label>
        <input id="txtName" class="form-control" name="txtName" />

    </div>
    <div class="group">
        <label class="control-label">密码</label>
        <input id="txtPwd" class="form-control" name="txtPwd" />

    </div>

    <button id="btnLogin" class="btn-group" name="btnLogin">登录</button>
    <button id="btnReset" class="btn-group" name="btnReset">重置</button>
</body>
</html>
View Code

.net 一般处理程序代码 如下:

技术分享图片
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;

namespace UI
{
    /// <summary>
    /// Login 的摘要说明
    /// </summary>
    public class Login : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            string userName = context.Request.Form["userName"]==null ?"":context.Request.Form["UserName"].ToString();
            string userPwd = context.Request.Form["UserPass"] == null ?"" : context.Request.Form["UserPass"].ToString();

            using (SqlConnection con = new SqlConnection("server =.;uid=sa;pwd=123;database=LT"))
            {
                using (SqlCommand cmd = new SqlCommand())
                {
                    string s = string.Format("select Count(1) cnt from users where userName =‘{0}‘ and pwd=‘{1}‘", userName, userPwd);
                    cmd.CommandText = s;
                    cmd.Connection = con;
                    con.Open();

                   int cnt = int.Parse( cmd.ExecuteScalar().ToString());

                    if (cnt == 1)
                    {
                        context.Response.Write(userName+userPwd+"登录成功"+s);

                    }
                    else
                    { context.Response.Write(userName+ userPwd + "登录失败"+s); }
                }
            }
                
                
           
                
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
View Code

 

一定要细心

但 有时由于以前的习惯,只是细心是不能解决的,这个需要靠长时间的积累了~~ 

要多做、多写、多看。

以上是关于jQuery Ajax请求 .net 一般处理程序的主要内容,如果未能解决你的问题,请参考以下文章

.net Ajax与后台一般处理程序(ashx) 交互

甩掉 ashx/asmx,使用jQuery.ajaxWebService请求WebMethod,Ajax处理更加简练

jquery ajax参数

一般处理程序(ashx)的使用

Jquery Ajax调用aspx页面方法

Jquery Ajax调用aspx页面方法