0
私の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>
私のコードが実際に何をしているのかわかりません。
[ネットワーク]タブでは、サーブレットが呼び出され、情報で応答しています。私は情報を同じページにリフレッシュせずに表示したかったと言います。 .html（...）または.appendTo（...）は動作しますか？ – RedPhanthom
はい、正確に上記のコードで説明したとおりです： '$（ 'div.result'）.html（response.message）たとえば' –
ありがとう、結果を分割して表に表示させたい場合は、どのようにすればよいでしょうか/ – RedPhanthom