JQuery学习1——入门小实例

最新推荐文章于 2023-04-27 17:33:16 发布

yjjm1990

最新推荐文章于 2023-04-27 17:33:16 发布

阅读量990

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery

本文链接：https://blog.youkuaiyun.com/yjjm1990/article/details/8689270

JQuery 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何在ASP.NET框架下实现用户输入验证、后台数据处理及响应，包括使用CSS样式、JavaScript进行用户界面增强，以及后台逻辑处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例子展示：

页面刚刚加载的时候，显示如图所示：

当在文本框中输入数据后，文本框的红色标识消失，如图所示：

点击确定按钮后，会通过后台来向页面输出数据，如图所示：

前台的代码如下（asp.net）：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/UserVerify.js"></script>
    <link href="css/StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        请输入用户名：<input type="text" class="userName" id="userName" /><input type="button" id="verifyButton" value="确定" />
        <div id="returnVal"></div>
    </form>
</body>
</html>

CSS()

.userName {
    border:1px solid red;
    background-image:url("../images/userVerify.gif");
    background-position:bottom;
    background-repeat:repeat-x;
}

页面的后台代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string userName =HttpUtility.UrlDecode(Request.QueryString["userName"]);

        //HttpContext.Current.Response.Write(userName);

        if (userName != null)
        {
            Response.Write("您输入的是："+userName);
            Response.End();
        }


    }
}

添加的UserVerify.js文件如下：

/// <reference path="jquery-1.9.1.min.js" />  
//上面这句话，可以在我们当前的JS里显示智能提示。
$("document").ready(function () {
    var userName = $("#userName");

    $("#verifyButton").click(function () {
        var value = userName.val();
        if (value=="") {
            alert("请输入用户名！");
        }
        else {
            //两次encodeURI解决中文乱码问题
            $.get("Default.aspx?userName="+ encodeURI(encodeURI(value)), function (response) {
                $("#returnVal").html(response);
            });
        }
    });

    userName.keyup(function () {
        var value = userName.val;
        if (value != "") {
            userName.removeClass();
        }
        else {
            userName.addClass();
        }
    });
});