jQuery.get()函數的詳細使用可以參考這裡。注意get方式需要使用
resp.setContentType("text/html;charset=utf-8");
String old = req.getParameter("name");
String name = new String(old.getBytes("iso-8859-1"),"utf-8");
解決亂碼問題。
源碼如下：ajax.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用者名校驗</title>
<script src="js/jquery-2.1.1.min.js" type="application/javascript"></script>
<script src="js/verify.js" type="application/javascript"></script>
</head>
<body>
請輸入使用者名：
<br />
<input type="text" id="userName" />
<input type="button" value="校驗" onclick="verify()">
<div id="result"></div>
</body>
</html>
ajaxservlet.java
package com.count.Online;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* Created by root on 2016/9/6.
*/
public class ajaxservlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
try {
resp.setContentType("text/html;charset=utf-8");
String old = req.getParameter("name");
String name = new String(old.getBytes("iso-8859-1"),"utf-8");
PrintWriter out = resp.getWriter();
System.out.println(name);
if (old == null || old.length() == ) {
out.print("使用者名不能為空");
} else {
if (name.equals("大白喵")) {
out.println("使用者名【" + name + "】已經存下，請使用其他使用者名");
} else {
out.println("使用者名【" + name + "】不存在，可以使用");
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
web.xml代碼片段
<servlet>
<servlet-name>ajaxServlet</servlet-name>
<servlet-class>com.count.Online.ajaxservlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ajaxServlet</servlet-name>
<url-pattern>/ajaxservlet</url-pattern>
</servlet-mapping>
verify.js
/**
* Created by root on 2016/9/6.
*/
function verify() {
var jqueryObj = $("#userName");
var userName = jqueryObj.val();
$.get("ajaxservlet?name=" + userName, null, callback);
function callback(data) {
var resultObj = $("#result");
resultObj.html(data);
}
}
![SpringMVC(六) | 前後端互動之ajax與jsonjsonajax[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)