Home > Web Front-end > JS Tutorial > Code to simulate jQuery ajax server-side communication with the client_jquery

Code to simulate jQuery ajax server-side communication with the client_jquery

WBOY
Release: 2016-05-16 18:08:58
Original
1342 people have browsed it

The functions are as follows:

If the user name is empty, it will prompt "The user name cannot be empty"

If the username exists, it will prompt “Username [xxxxxx] already exists, please use another username, 4”                                                            

If the username does not exist, it will prompt "Username [xxxxxx] does not exist yet, you can use this username to register, 5"

The operation effect is as follows:

Code to simulate jQuery ajax server-side communication with the client_jquery

Code to simulate jQuery ajax server-side communication with the client_jquery

Code to simulate jQuery ajax server-side communication with the client_jquery

Code to simulate jQuery ajax server-side communication with the client_jquery

                                                 
Directory structure:
Code to simulate jQuery ajax server-side communication with the client_jqueryServer-side AjaxServer

package com.ljq.test ;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import javax.servlet.ServletException;
import javax.servlet.http .HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@SuppressWarnings("serial")
public class AjaxServer extends HttpServlet {
@ Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
try {
//Set page utf-8 encoding
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
Integer total = (Integer) request.getSession().getAttribute("total");
int temp = 0;
if (total == null) {
temp = 1;
} else {
temp = total.intValue() 1;
}
request.getSession().setAttribute ("total", temp);
// 1. Get parameters
String param = request.getParameter("name");
String name = URLDecoder.decode(param, "UTF-8") ;
// 2. Check whether the parameters are valid
if (param == null || param.length() == 0) {
out.println("Username cannot be empty");
} else {
// 3. Verification operation
if (name.equals("linjiqin")) {
// 4. Return result data
out.println("Username [" name "] already exists, please use another username, " temp);
} else {
out.println("Username [" name "] does not exist yet, you can use this username to register, " temp);
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
protected void doPost( HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}


Configuration web.xml


xmlns:xsi="http://www.w3. org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/ web-app_2_4.xsd">

AjaxServer
com.ljq.test.AjaxServer



AjaxServer
/servlet/ajaxServer< /url-pattern>


index.jsp




index.jsp page


Copy code The code is as follows:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() path "/";
%>




My JSP 'index.jsp' starting page










请输入用户名:







validate.js
复制代码 代码如下:

function verify() {
// 解决中文乱码方法一: 页面端发出的数据作一次encodeURI,服务器段使用new String(name.getBytes("iso8859-1"),"UTF-8");
// 解决中文乱码方法二: 页面端发出的数据作两次encodeURI,服务器段使用URLDecoder.decode(name,"UTF-8")
var url = "servlet/ajaxServer?name=" encodeURI(encodeURI($("#userName").val()));
//注意url前不要加"/",否则无法访问url
//var url = "/servlet/ajaxServer?name=" encodeURI(encodeURI($("#userName").val())); //错误
url = convertURL(url);
$.get(url, null, function(data) {
$("#result").html(data);
});
}
// 给url地址增加时间戳,骗过浏览器,不读取缓存
function convertURL(url) {
// 获取时间戳
var timstamp = (new Date()).valueOf();
// 将时间戳信息拼接到url上
if (url.indexOf("?") >= 0) {
url = url "&t=" timstamp;
} else {
url = url "?t=" timstamp;
}
return url;
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template