Home>

First show the effect achieved by this example:

When the page just loaded,The display is as shown:

When you enter data in the text box,The red logo in the text box disappears,as the picture shows:

After clicking the OK button,Will output data to the page through the background,as the picture shows:

The foreground code is as follows (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 runat="server">
  Please enter your username:<input type="text" /><input type="button" value="OK" />
  <div></div>
 </form>
</body>
</html>

css ()

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

The background code of the page is as follows:

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 ("What you entered is:" + username);
   response.end ();
  }
 }
}

The added userverify.js file is as follows:

///<reference path="jquery-1.9.1.min.js" />
//The above sentence,Smart tips can be displayed in our current js.
$("document"). ready (function () {
 var username=$("#username");
 $("#verifybutton"). click (function () {
  var value=username.val ();
  if (value == "") {
   alert ("Please enter your username!");
  }
  else {
   //twice encodeuri to solve the Chinese garbled problem
   $.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 ();
  }
 });
});

A small example of jquery entry, especially suitable for beginners,Hope you like it,Starting today, I will organize knowledge about jquery one after another.I hope everyone will continue to pay attention.

  • Previous Batch processing perfectly realizes FTP remote backup data
  • Next Analysis of JSP program operation principle, document structure and simple input and output examples