是我提供的代码实际上与AJAX调用I'I’我想对Servlet做点什么

Is the code that I provide actually work with the AJAX call I'm trying to do to the Servlet

本文关键字：Servlet 什么 代码 实际上 调用 AJAX      更新时间：2023-09-26

我正试图弄清楚我的js文件中的AJAX调用是否真的在工作，并将信息发送回Servlet。我正试图弄清楚如何使用servlet发出的响应来显示用户提供的信息。

jTesting.js

$(function() {
  $("#slider-range").slider({
    range: true,
    min: 0,
    max: 500,
    values: [50, 350],
    slide: function(event, ui) {
      $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
    }
  });
  $("#amount").val(
    "$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
});
$(function() {
  var $user = $('#user');
  var $name = $('#name');
  var $phone = $('#phone');
  var $amount = $('#amount');
  $('#sendInfo').on(
    'click',
    function(event) {
      event.preventDefault();
      var userInfo = {
        Name: $name.val(),
        Phone: $phone.val(),
        Amount: $amount.val()
      };
      $.ajax({
        type: 'POST',
        url: 'TestingServlet.do',
        timeout: 2000,
        data: userInfo,
        success: function() {
          var output = '<p>Name: ' + userInfo.Name + '</p> <br/>' + '<p>Phone: ' + userInfo.Phone + '</p> <br/>' + '<p>Amount: ' + userInfo.Amount + '</p><br/>';
          $user.html(output);
        },
        error: function() {
          alert("ERROR!");
        }
      });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery Testing</title>
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" type="text/javascript"></script>
  <!--- jQueryUI Library -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
  <!-- Latest compiled JavaScript -->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script type="text/javascript" src="jTesting.js"></script>
</head>
<body>
  <form class="container form-horizontal" method="POST" action="">
    <div class="page-header">
      <h1>jQuery Testing</h1>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label">Name:</label>
      <div class="col-md-3">
        <input type="text" class="form-control" name="name" id="name" required />
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label">Phone:</label>
      <div class="col-md-3">
        <input type="tel" class="form-control" name="phone" id="phone" required />
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label">Spending Range</label>
      <div class="col-md-3">
        <div id="slider-range"></div>
        <input type="text" id="amount" readonly style="border: 0; color: #f6931f; font-weight: bold;">
      </div>
    </div>
    <div class="form-group">
      <div class="col-md-3 col-md-offset-2">
        <button class="btn btn-default" id="sendInfo">Submit</button>
      </div>
    </div>
    <div class="form-group">
      <ul id="user"></ul>
    </div>
  </form>
</body>
</html>

TestingServlet.java

package com.jtesting.servlet;
import java.io.IOException;
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 org.json.simple.JSONArray;
import org.json.simple.JSONObject;
@WebServlet("/TestingServlet")
public class TestingServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    @SuppressWarnings("unchecked")
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String clientName = request.getParameter("Name");
        String clientPhone = request.getParameter("Phone");
        String spendingAmount = request.getParameter("Amount");
        JSONArray list = new JSONArray();
        list.add(clientName);
        list.add(clientPhone);
        list.add(spendingAmount);
        JSONObject obj = new JSONObject();
        obj.put(response, list);
        System.out.println(clientName + ", " + clientPhone + ", " + spendingAmount);
        response.getWriter().write(obj.toJSONString());
        response.setContentType("application/json");
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
}

web.xml

    <?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    id="WebApp_ID" version="3.1">
    <servlet>
        <servlet-name>TestingServlet</servlet-name>
        <servlet-class>com.jtesting.servlet.TestingServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>TestingServlet</servlet-name>
        <url-pattern>/TestingServlet.do</url-pattern>
    </servlet-mapping>
</web-app>

我不完全知道我的代码是否真的在做它应该做的事情。

要在前端使用servlet的响应，请将Javascript更改为：

success: function(response) {
    // response variable is the output your servlet generated, so eg:
    // console.log(response) if it is text/html
    // console.dir(response) if it is json
    // $('div.result').html(response.message) for example
    // ...
}

如果servlet返回JSON，请将dataType添加到$.ajax调用中：

$.ajax({
    dataType: 'json',
    ...
});

要检查AJAX调用是否正常，请打开浏览器的开发工具并检查网络活动选项卡。您应该看到http请求，并能够看到发送的数据和servlet响应。

相关文章：