2013-12-14 4 views
2

Может ли кто-нибудь дать мне пример того, как сделать JQuery на JQuery на HTML-странице сервлетом Java (пожалуйста, напишите полный код html-страницы, вызов и сервлет Класс). Я хочу сделать это в динамическом веб-проекте в Eclipse. Я предполагаю, что web.xml должен быть изменен, чтобы это сделать, поэтому объясните, как изменить этот файл. Существуют ли другие файлы, которые необходимо изменить?JQuery, Java Servlet Examplet в Eclipse WTP

С уважением и спасибо заранее, Майкла

ответ

6

Сначала я создаю Servlet, он не имеет никакого дополнительного кода для обработки запроса Ajax, поэтому в моем примере я получаю два параметра из запроса добавил их и возвратите String с результатом, очень просто.

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


    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
     //Get the parameters from the request 
     String param1 = request.getParameter("param1"); 
     String param2 = request.getParameter("param2"); 

     int result = Integer.parseInt(param1) + Integer.parseInt(param2); 
     String responseResult = "The result is " + result; 

     response.setContentType("text/plain"); 
     response.getOutputStream().write(responseResult.getBytes()); 
    } 

} 

Я использую версию контейнера сервлетов 3.0, так что я могу указать информацию о адреса сервлета с аннотацией @WebServlet и мне не нужно, чтобы изменить мой web.xml.

Html очень прост, он имеет два входа для получения операндов и имеет 3 кнопки. Первый вызывает сервлет без Ajax, второй вызывает сервлет с ajax, получая параметры формы и последний вызов с помощью ajax, но он отправляет параметры с помощью json.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Calculator</title> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
</head> 
<body> 

    <fieldset> 
     <legend>Parameters</legend> 
     <form id="form1" action="CalculatorServlet" method="get"> 
      <label for="param1" > Operand 1</label> 
      <input type="number" id="param1" name="param1"> 
      <label for="" id="param2">Operand 2</label> 
      <input type="number" id="param2" name="param2"> 
      <div> 
      <input type="submit" value="Submit without Ajax"> 
      <input type="button" value="Submit with Ajax" id="btnCall1"> 
      <input type="button" value="Submit param1 and 2" id="btnCall2"> 
      </div> 
     </form> 
    </fieldset> 

    <script> 
     (function() { 
      $("#btnCall1").click(function() { 
       $.ajax({ 
        url : "CalculatorServlet", 
        type: "get", 
        data: $("#form1").serialize(),     
        dataType: "text",     
        success: success, 
        error: error 
       }); 
      }); 

      $("#btnCall2").click(function() { 
       var param1Value = $("#param1").val(); 
       $.ajax({ 
        url : "CalculatorServlet", 
        type: "get", 
        data: {param1: param1Value, param2: 2},     
        dataType: "text",     
        success: success, 
        error: error 
       }); 
      }); 

      function success(data, textStatus, jqXHR) 
      { 
       alert(data); 
      } 

      function error(jqXHR, textStatus, errorThrown) 
      { 
       alert("error "+textStatus); 
      } 
     })(); 
    </script> 
</body> 
</html> 

* Замечания: * Я использую метод получить, потому что я хочу, чтобы показать ответ с не AJAX вызова, вы должны использовать POST. Я тестирую этот пример с Tomcat 7.0. Если вам нужно получить данные для сериализации для объектов (вам нужно получить объект), или для возврата и объектов, которые необходимо использовать для связи JSON, а в сервлете использовать какой-то JSON-сериализатор, я рекомендую вам GSON o Jackson, так что вы получаете параметр JSON String в качестве параметра и десериализовать в сервлете, чтобы ответить на сериализацию вашего объекта на JSON и отправить ответ, если вы отправляете JSON, вам нужно изменить атрибут данных jQuery ajax, чтобы данные: «json»

+0

И где HTML-страница находится в проекте WTP? –

+0

Под папкой Веб-контент –

+0

Где находится сервлет? В папке Java Ressources? –

Смежные вопросы