在做用戶登陸和注冊頁面時，可以通過事件在js里面寫ajax和后臺異步傳輸，返回所需要的數據。
比如在寫注冊，當用戶離開用戶名的文本框時候，可以通過ajax引擎訪問數據庫查看這個命名是否合法，并且將信息返還給用戶。
簡單的deme如下：js代碼主要部分

var req;//創建對象 function check(x){var errMsg=document.getElementById("errMsg");if( x.value==null || x.value=="" ) {errMsg.innerHTML ="請輸入用戶名";return false; }else{var checkname=document.getElementById("checkname");//namevar url = "checkname?id=" checkname.value; //創建一個XMLHttpRequest對象req if(window.XMLHttpRequest) { //IE7, Firefox, Opera支持 req = new XMLHttpRequest(); }else if(window.ActiveXObject) { //IE5,IE6支持 req = new ActiveXObject("Microsoft.XMLHTTP"); } req.open("GET", url, true); //onreadystatechange屬性存有處理服務器響應的函數,有5個取值分別代表不同狀態 req.onreadystatechange = callback; //send函數發送請求 req.send(null); }}function callback() { if(req.readyState == 4 && req.status == 200) { var check = req.responseText; // alert(check);if(check=="yes")document.getElementById("errMsg").innerHTML = "用戶名已存在";elsedocument.getElementById("errMsg").innerHTML = "用戶名正確";} }

jquery ajax模板

$.ajax({url : 'add',//urltype : "post",dataType : "json",data : {'name':'bigsai','index':1}success : function(data) {alert(data);},error : function(XMLHttpRequest, textStatus, errorThrown) {layer.msg("textStatus = " textStatus ", XMLHttpRequest.status = " XMLHttpRequest.status ", XMLHttpRequest.readyState = " XMLHttpRequest.readyState);}}); });

sevlet代碼部分：

mport java.io.IOException; import java.io.PrintWriter; import java.net.URLDecoder; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement;import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;public class checkname extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); Connection con;response.setContentType("text/html"); response.setHeader("Cache-Control", "no-store"); response.setHeader("Pragma", "no-cache"); response.setDateHeader("Expires", 0); String name = request.getParameter("id"); name = new String(request.getParameter("id").getBytes("iso8859-1"),"utf-8");//System.out.println(name);try {Class.forName("com.mysql.jdbc.Driver");// System.out.println("數據庫驅動加載成功"); con = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/db?useSSL=false","root","123456"); // System.out.println("數據庫連接成功"); String sql = "SELECT * FROM user where name=" "'" name "'"; Statement stmt = con.createStatement(); ResultSet rs1 = stmt.executeQuery(sql);if(rs1.next()){out.write("yes");}else{ out.write("no"); } } catch (ClassNotFoundException | SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}out.close(); //out.write("hehe");} public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);} }

web.xml配置

checkname</servlet-name>com.html.ajax.checkname</servlet-class></servlet>checkname</servlet-name>/checkname</url-pattern></servlet-mapping>

效果圖

如果對后端、爬蟲等感性趣歡迎關注我的個人公眾號交流：bigsai

總結

以上是生活随笔為你收集整理的Java 和Ajax的简单结合的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。