jquery $.ajax Verify that the user name has sample code

Source: Internet
Author: User

The function is absolutely realized. Compatible with IE6, IE7, FF, Chrome

The servlet code for Ajaxxmlserver is as follows:

Package com.web;

Import java.io.IOException;
Import Java.io.PrintWriter;

Import javax.servlet.ServletException;
Import Javax.servlet.http.HttpServlet;
Import Javax.servlet.http.HttpServletRequest;
Import Javax.servlet.http.HttpServletResponse;

public class Ajaxxmlserver extends HttpServlet {


public void doget (HttpServletRequest request, httpservletresponse response)
Throws Servletexception, IOException {

try {
The content-type of the response must be text/xml, because the data received in jquery is in the form of XML
Response.setcontenttype ("Text/xml;charset=utf-8");
Request.setcharacterencoding ("Utf-8");
Response.setcharacterencoding ("Utf-8");
PrintWriter out = Response.getwriter ();
1. Get the parameter
String username=request.getparameter ("UserName");
2, the returned data type assembled into XML format
StringBuilder builder=new StringBuilder ();
Builder.append ("<message>");
if (Username==null | | username.length () ==0) {
Builder.append ("User name cannot be empty"). Append ("</message>");
}else{
3. Check operation
if (Username.equals ("Tfq")) {
Return to the user for prompt information
Builder.append ("User name [" +username+ "] already exists, please re-enter user name"). Append ("</message>");
}else{
Builder.append ("User name [" +username+ "] has not been registered, you can use this username"). Append ("</message>");
}
Out.println (Builder.tostring ());
}
catch (Exception e) {
E.printstacktrace ();
}
}


public void DoPost (HttpServletRequest request, httpservletresponse response)
Throws Servletexception, IOException {

Response.setcontenttype ("Text/xml");
Request.setcharacterencoding ("Utf-8");
Response.setcharacterencoding ("Utf-8");
Doget (Request,response);
}

}



The checkuserjquery.html file code is as follows:


<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>my JSP ' CheckUser starting page</title>

<meta http-equiv= "Pragma" content= "No-cache" >
<meta http-equiv= "Cache-control" content= "No-cache" >
<meta http-equiv= "Expires" content= "0" >
<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "This are my page" >
<script type= "Text/javascript" src= "Js/jquery-1.4.2.js" ></script>
<script type= "Text/javascript" src= "Js/myvlidate_jquery.js" ></script>

<body>
<center>
<br/>
User name: <input type= "text" id= "UserName"/>
<input type= "button" value= "checksum" onclick= "Validate ()"/>
<div id= "Showresult" ></div>
</center>
</body>

The Myvlidate_jquery.js file code is as follows:

Verify that the user exists
function Validate () {

1 getting the contents of a text box
document.getElementById ("UserName"); Dom's Way
jquery lookup node way, parameter # Plus id attribute value can find a node
var obj = $ ("#userName");
var userName = Obj.val ();
Alert ("UserName:" + userName);

2 the servlet to send the retrieved content to the server
Encapsulation of calling jquery's XMLHttpRequest object GET request
$.get ("servlet/checkusername?username=" + userName, NULL, callback);
The format of a simple object is defined in JS
var jsobj={name: "123", age:30};
Encapsulation of XMLHttpRequest object get requests using jquery
$.ajax ({
Type: "POST",//http request method
URL: "Servlet/ajaxxmlserver",//URL sent to the server
Data: "Username=" +username,//parameters sent to the server
DataType: "xml",//Tell jquery the data format returned (note that the data format must be consistent with the data format returned by the submitted servlet, otherwise it will not call callback)
Success:callback//definition interaction completes, and callback function is invoked when the server returns data correctly
});
}

callback function
function callback (data) {
3 data returned by the receiving operator
First you need to parse data from the DOM object
var jqueryobj=$ (data);
Get Message Node
var message=jqueryobj.children ();
Get text content
var text=message.text ();
4 Display the returned data in the DIV
$ ("#showResult"). html (text);
}

In doing this example, I accidentally ajaxxmlserver the data format of jquery back into HTML, how to debug can not enter the callback. Please note that the servlet is consistent with the data returned in query.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.