zoukankan      html  css  js  c++  java
  • jqyery+ajax 提交表单

    首先添加一个login.html 代码如下:

    <title>$.Ajax()方法发送请求</title>
    <script type="text/javascript" src="jquery-1.4.1.js"></script>
    <style type="text/css">
    body
    {
      font-size: 13px;
    }
    .divFrame
    {
       225px;  
      border: solid 1px #666;
    }
    .divFrame .divTitle
    {
      padding: 5px;
      background-color: #eee;
      height: 23px;
    }
    .divFrame .divTitle span
    {
      float: left;
      padding: 2px;
      padding-top: 5px;
    }
    .divFrame .divContent
    {
      padding: 8px;
      text-align: center;
    }
    .divFrame .divContent .clsShow
    {
      font-size: 14px;
      line-height: 2.0em;
    }
    .divFrame .divContent .clsShow .clsError
    {
      font-size: 13px;
      border: solid 1px #cc3300;
      padding: 2px;
      display: none;
      margin-bottom: 5px;
      background-color: #ffe0a3;
    }
    .txt
    {
      border: #666 1px solid;
      padding: 2px;
       150px;
      margin-right: 3px;
    }
    .btn
    {
      border: #666 1px solid;
      padding: 2px;
       50px;
    }
    </style>
    <script type="text/javascript">
    $(function () {
      $("#txtName").focus();         //输入焦点
      $("#txtName").keydown(function (event) {
      if (event.which == "13") {
        $("#txtPass").focus();
        }
      });
      $("#txtPass").keydown(function (event) {
        if (event.which == "13") {        //回车键,用.ajax提交表单
        $("#btnLogin").trigger("click");
        }
      });
      $("#btnLogin").click(function () {       //“登录”按钮单击事件
        //获取用户名称
        var strTxtName = encodeURI($("#txtName").val());
        //获取输入密码
        var strTxtPass = encodeURI($("#txtPass").val());
        //开始发送数据
        $.ajax
        ({       
        url: "Login.aspx", //请求登录处理页
        dataType: "html",//登录处理页
        //传送请求数据
        data: { txtName: strTxtName, txtPass: strTxtPass },
        success: function (strValue) { //登录成功后返回的数据
        //根据返回值进行状态显示
        if (strValue == "True") {//注意是True,不是true
          $(".clsShow").html("操作提示,登录成功!" + strValue);
          }
          else {
            $("#divError").show().html("用户名或密码错误!" + strValue);
            }
          }
        })
      })
    })
    </script>
    </head>
    <body>
      <form id="frmUserLogin">
      <div class="divFrame">
        <div class="divTitle">
        <span>用户登录</span>
        </div>
      <div class="divContent">
        <div class="clsShow">
          <div id="divError" class="clsError">
          </div>
        <div>
        名称:<input id="txtName" type="text" class="txt" />
        </div>
        <div>
        密码:<input id="txtPass" type="password" class="txt" />
        </div>
        <div>
        <input id="btnLogin" type="button" value="登录" class="btn" />
        <input id="btnReset" type="reset" value="取消" class="btn" />
        </div>
        </div>
       </div>
      </div>
    </form>
    </body>
    </html>

    添加login.aspx页面 代码如下:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="WebApplication3.Login" %>
    <%
      string strName = System.Web.HttpUtility.UrlDecode(Request["txtName"]);
      string strPass = System.Web.HttpUtility.UrlDecode(Request["txtPass"]);
      bool login = false;
      if (strName == "admin" && strPass == "admin")
      {
        login = true;
      }
      Response.Write(login);
    %>

  • 相关阅读:
    STS 配置tomcat以后,无法访问
    docker
    Java
    STS
    Java
    docker
    sql产生随机时间
    sql产生随机数
    Android 代码自动提示功能
    Activity的跳转与传值
  • 原文地址:https://www.cnblogs.com/liuruipeng/p/7617115.html
Copyright © 2011-2022 走看看