私が提供するコードは実際にはサーブレットにしようとしているAJAX呼び出しで動作していますか

私のjsファイルにあるAJAX呼び出しが実際に動作していて、サーブレット。私はサーブレットがユーザーが提供する情報を表示するために使用する応答をどのように使用するかを理解しようとしています。私が提供するコードは実際にはサーブレットにしようとしているAJAX呼び出しで動作していますか

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>

私のコードが実際に何をしているのかわかりません。

出典

2016-03-24 RedPhanthom

、あなたのフロントエンドにサーブレットからの応答を使用するためにあなたの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 
    // ... 
}

サーブレットがJSONを返す場合、あなたの$アヤックスコールにデータ型を追加します。

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

AJAXコールが機能しているかどうかを確認するには、ブラウザの開発者ツールを開いて、ネットワークアクティビティタブを確認してください。 http要求が表示され、送信されたデータとサーブレットの応答を確認することができます。

出典

2016-03-24 17:20:52

[ネットワーク]タブでは、サーブレットが呼び出され、情報で応答しています。私は情報を同じページにリフレッシュせずに表示したかったと言います。 .html（...）または.appendTo（...）は動作しますか？ – RedPhanthom

はい、正確に上記のコードで説明したとおりです： '$（ 'div.result'）.html（response.message）たとえば' –

ありがとう、結果を分割して表に表示させたい場合は、どのようにすればよいでしょうか/ – RedPhanthom

私が提供するコードは実際にはサーブレットにしようとしているAJAX呼び出しで動作していますか

答えて

関連する問題