使用ajax向后台servlet发出请求并响应

博主初来乍到，希望大家能给博主更多的意见。

jsp页面代码

一下jsp代码使用了JavaScript或JQuery来实现

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
  <title>Ajax异步请求</title>
</head>
<body>
<div class="header">
    <input id="username" type="text" name="name" value="${Users.name}" onblur="namecase()"/>
    <span id="hint"></span>
</div>

</body>
<script type="text/javascript">
// 以下是JQuery对ajax的实现方式
$('#username').on('blur',function(){
    var usernameText = $('#username').val();
    $.get('/JavaEEtest/RegisterServlet?usernametext='+usernameText,function(result){
         $("#hint").html(result);
        },'json')
})

// 以下是JavaScript对ajax实现方式
//  var xmlHttp;
//  function namecase(){
//      var content=document.getElementById("username");
//      if(content==""){
//          return;
//      }
//      xmlHttp=createXMLHttp();
//      var url="/JavaEEtest/RegisterServlet?usernametext="+content.value;
//      xmlHttp.open("GET",url,true);
//      xmlHttp.onreadystatechange=callback;
//      xmlHttp.send(null);
//  }

//  function createXMLHttp(){
//      var xmlHttp;
//      if(window.XMLHttpRequest){
//          xmlHttp=new XMLHttpRequest();
//      }
//      if(window.ActiveXObject){
//          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
//          if(!xmlHttp){
//              xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
//          }
//      }
//      return xmlHttp;
//  }

//  function callback(){
//      if(xmlHttp.readyState==4){
//          if(xmlHttp.status==200){
//              var result=xmlHttp.responseText;
//              var json=eval("("+result+")");
//              document.getElementById("hint").innerHTML=json;
//          }

//      }
//  }
</script>
</html>

后台servlet代码

package servlet;

import java.io.IOException;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

/**
 * Servlet implementation class RegisterServlet
 */
@WebServlet("/RegisterServlet")
public class RegisterServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public RegisterServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //从前端获取usernametext的对象
        String usernametext=request.getParameter("usernametext");
        //校验输入内容
        if(usernametext=="csdn"||usernametext.equals("csdn")){
            String jsonarray= "['"+usernametext+"']";
            response.getWriter().write(JSONArray.fromObject(jsonarray).toString());
        }else{
            response.getWriter().write(JSONArray.fromObject("['你输入的不是csdn']").toString());
        }

    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

注意：

jsonarray的格式是数组类型，如要输出string类型的：

"['此用户名可以使用']"

输入xx
这里写图片描述
输入csdn

使用ajax向后台servlet发出请求并响应

使用ajax向后台servlet发出请求并响应

jsp页面代码

后台servlet代码

注意：

猜你喜欢