初学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>

.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 == )

                    {

                        context.Response.Write(userName+userPwd+"登录成功"+s);

                    }

                    else

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

                }

            }

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

一定要细心

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

要多做、多写、多看。

jQuery Ajax请求 .net 一般处理程序的更多相关文章

  1. jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法

    1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是“a ...

  2. jquery ajax请求方式与提示用户正在处理请稍等，等待数据返回时loading的显示

    1.jquery ajax请求方式与提示用户正在处理请稍等 为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示.我们可通过设置$.ajax()下的参数beforeSend()来实 ...

  3. jQuery ajax 请求php遍历json数组到table中

    html代码(test.html),js在html底部 <!DOCTYPE html> <html lang="en"> <head> < ...

  4. jquery Ajax请求示例，jquery Ajax基本请求方法示例

    jquery Ajax请求示例,jquery Ajax基本请求方法示例 ================================ ©Copyright 蕃薯耀 2018年5月7日 https: ...

  5. 原生js，jquery ajax请求以及jsonp的调用

    ajax    是用来处理前后端交互的技术,可以改善用户体验,其本质是    XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容  ...

  6. jQuery ajax请求错误返回status 0和错误error的问题

    上周发现一个jQuery ajax请求错误返回status 0和错误error的问题,responseText是"error",状态码是0而不是200: $.ajax({ type ...

  7. jquery Ajax请求中显示Loading...

    jquery Ajax请求中显示Loading... $('#btnTest').click(function(){      $.ajax({           url ---- ,根据你需要设置 ...

  8. 二、jQuery Ajax请求

    一.Ajax请求 1.jQuery Ajax请求 let ajaxTimeOut = $.ajax({ //将网络请求事件赋值给变量ajaxTimeOut url: "/api_v1.1/a ...

  9. jquery ajax 请求参数详细说明 及 实例

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

随机推荐

  1. LInux文件基础知识和文件目录操作（二）文件I/O操作

    1.文件I/O操作分为两部分来讲解: 第一部分是非缓冲文件操作,这种操作适合于比较小规模文件的读写和对实时性要求很高的设备的数据通信,这类操作是系统调用提供的: 第二部分是缓冲文件操作,所面向的则是大 ...

  2. 炼数成金数据分析课程---10、python中如何画图

    炼数成金数据分析课程---10.python中如何画图 一.总结 一句话总结: 主要matplotlib库,pandas中也可以画一些基础图 大纲+实例快速学习法 1.matplotlib的最简单画图 ...

  3. CSS：CSS 背景

    ylbtech-CSS:CSS 背景 1.返回顶部 1. CSS 背景 CSS 背景属性用于定义HTML元素的背景. CSS 属性定义背景效果: background-color background ...

  4. jmeter 环境java监视和管理控制

    打开这个小工具的步骤很简单,如果你已经配置好了Jmeter运行的环境,那么你也就不用去做其他的配置,直接 点击:开始——>运行——>输入cmd——>然后在出现的命令行界面输入“jco ...

  5. java.lang.Object错误

    java.lang.Object错误 项目遇到一个错误 因为构建路径不完整..... 主要是因为缺少JDK(java.lang.Object来自那里),或者是JDK错误. 右击项目-->属性-- ...

  6. IdentityServer4认证服务器集成Identity&配置持久化数据库

    文章简介 asp.net core的空Web项目集成相关dll和页面文件配置IdnetityServer4认证服务器 Ids4集成Identity Ids4配置持久化到数据库 写在最前面,此文章不详细 ...

  7. Selenium3 + Python3自动化测试系列八——警告框处理和下拉框选择

    警告框处理 在WebDriver中处理JavaScript所生成的alert.confirm以及prompt十分简单,具体做法是使用 switch_to.alert 方法定位到 alert/confi ...

  8. 在vue中运用mt-loadmore 实现上拉加载，下拉刷新

    元旦了,给手残党直接复制的机会,代码如下: 1. :style="{'-webkit-overflow-scrolling': scrollMode}" 最外层div设置,以便兼容 ...

  9. Windows跳板机无法共享本地主机剪贴板

    我的跳板机是Windows 2003 ,总是无法共享本地的剪贴板,我一般是在本地编辑SQL或者一些脚本,然后粘贴到跳板机中. 如果碰到无法共享本地剪贴板的情况,可以尝试按照以下步骤解决: 开始 -- ...

  10. 移动端布局 + iscroll + 滚动事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...