1
Maven、Spring、およびMySQLを使用してJava MVCプロジェクトを行っています。Spring MVC JSPビューでAjax呼び出しを実装する方法
実際、「選択」フォームで値を選択したときや、カレンダーで日付を選択したときに、テキストメッセージを表示したいとします。
私はこのようになります私のJSPビューに次のコード（これは質問のコアのみである）
<div class="well lead">Formulario De Registro De Tarea</div>
<form:form method="POST" modelAttribute="task" class="form-horizontal">
<form:input type="hidden" path="id" id="id"/>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-3 control-lable" for="type">Tipo de tarea</label>
<div class="col-md-7">
<select id="type" name="type">
<c:forEach var="item" items="${typesList}">
<option value="${item.type}">${item.type}</option>
</c:forEach>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-3 control-lable" for="date">Fecha</label>
<div class="col-md-7">
<form:input type="text" path="date" id="datepicker" style="width:100px" class="form-control input-sm"/>
<div class="has-error">
<c:if test="${fechaFestivo != null}">
<p> ${fechaFestivo}</p>
</c:if>
<form:errors path="date" class="help-inline"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-3 control-lable" for="duration">Duración (horas)</label>
<div class="col-md-7">
<form:input type="text" path="duration" id="duration" style="width:60px" class="form-control input-sm" />
<div class="has-error">
<c:if test="${duracionMaxima != null}">
<p> ${duracionMaxima}</p>
</c:if>
<form:errors path="duration" class="help-inline"/>
</div>
</div>
</div>
</div>
あります
何を私はそれを選択してから選択するときにしたいと思います"Tipo de tarea"、選択の下にテキストを表示："そのタイプのすべてのタスクの平均所要時間は...（平均数）"です。また
、私は言って「Duracion」フィールドの下にテキストを表示し、カレンダーから日付を選択：「あなたは実際にはこのためのX時間（時間の合計）（厳選された）日付を持っています」。より多くの情報を
EDITING
TaskController：
/**
* This method will provide the medium to add a new task.
*/
@RequestMapping(value = { "/newtask" }, method = RequestMethod.GET)
public String newTask(ModelMap model) {
Task task = new Task();
typesService.loadTypes();
Collection<Types> typesList = typesService.findAllTypes();
model.addAttribute("task", task);
model.addAttribute("typesList", typesList);
model.addAttribute("edit", false);
model.addAttribute("loggedinuser", getPrincipal());
return "task/register";
}
/**
* This method will be called on form submission, handling POST request for
* saving task in database. It also validates the task input
*/
@RequestMapping(value = { "/newtask" }, method = RequestMethod.POST)
public String saveTask(@Valid Task task, BindingResult result,
ModelMap model) {
Collection<Task> dayTasks = taskService.findTasksDateUserType(task.getDate(), task.getDate(), getPrincipalUser().getId(), null);
Double tasksDuration = taskService.getTasksDuration(dayTasks);
if(task.getDuration()+tasksDuration>12.0) {
ObjectError error = new ObjectError("duracionMaxima", "No se pueden incurrir más de 12 horas un mismo día");
result.addError(error);
}
if(festivoService.isFestivo(task.getDate())) {
ObjectError error = new ObjectError("fechaFestivo", "La fecha de la tarea es un día festivo");
result.addError(error);
}
if (result.hasErrors()) {
Collection<Types> typesList = typesService.findAllTypes();
//List<TaskType> typesList = new ArrayList<TaskType>(Arrays.asList(TaskType.values()));
model.addAttribute("typesList", typesList);
model.addAttribute("loggedinuser", getPrincipal());
for(ObjectError o: result.getAllErrors()) {
System.out.println(o.getObjectName());
if(o.getObjectName().equals("fechaFestivo")) {
model.addAttribute("fechaFestivo", "La fecha de la tarea es un día festivo");
}
if(o.getObjectName().equals("duracionMaxima")) {
model.addAttribute("duracionMaxima", "No se pueden incurrir más de 12 horas un mismo día");
}
}
return "task/register";
}
if(task.getDate().after(new Date())){
FieldError dateError =new FieldError("task","date",messageSource.getMessage("date.before", new String[]{}, Locale.getDefault()));
result.addError(dateError);
Collection<Types> typesList = typesService.findAllTypes();
model.addAttribute("typesList", typesList);
model.addAttribute("loggedinuser", getPrincipal());
return "task/register";
}
User user = getPrincipalUser();
taskService.save(task,user);
model.addAttribute("success", user.getName() + " ha registrado la tarea"+ task.getId() + " correctamente");
model.addAttribute("loggedinuser", getPrincipal());
//return "success";
return "task/registerSuccess";
}
AJAX RequestMappingを取得し、作成したタスクのjspのポスト：AJAXは
を呼び出すためは は、私はちょうどそれらの方法を行っています@RequestMapping(value= {"/ajax/type-{id}"})
public Double ajaxType(@PathVariable Integer typeId) {
return typesService.getAvgDailyEffort(typeId);
}
@RequestMapping(value= {"/ajax/date-{date}"})
public Double ajaxDate(@PathVariable String date) {
Double result = 0.;
DateFormat formatter = new SimpleDateFormat("dd/MM/yyyy");
try {
Date dateF = formatter.parse(date);
Collection<Task> tasks = taskService.findTasksDateUserType(dateF, dateF, getPrincipalUser().getId(), null);
result = taskService.getTasksDuration(tasks);
} catch (ParseException e) {
e.printStackTrace();
}
return result;
}
また、私は今私のJSPビューは次のようになります私のJSPビュー
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-3 control-lable"></label>
<div class="col-md-7">
<p id="avg"> Media de horas del tipo de tarea</p>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-3 control-lable"></label>
<div class="col-md-7">
<p id="durationday">Horas incurridas en la fecha</p>
</div>
</div>
</div>
にこれを追加しました：
それが値を取得することですjQueryの約読んだ後、私がやりたい何か「タイプ」（Tipo de tarea）と「日付」（Fecha）が変更された場合は、先に説明したものを計算し、対応するテキストを計算結果に置き換えます。
EDIT AGAIN はちょうど私のjspヘッド（jqueryのスクリプト）
$(document).ready(function(){
$("#type").change(function(){
$('#avg').load('/ajax-type',
"type="+$('#type').find('option').val())
});
$("#datepicker").change(function(){
$('#durationday').load('/ajax-date',
"date="+$('#datepicker').val())
});
});
にこのコードを追加したとする私のコントローラメソッドを変更：
@RequestMapping(value= {"/ajax-type"})
public @ResponseBody String ajaxType(@RequestParam("type") String type) {
Collection<Types> types = typesService.findAllTypes();
int typeId = 0;
for(Types t: types) {
if(t.getType().equals(type)) {
typeId = t.getId();
}
}
double avgDailyEffort = typesService.getAvgDailyEffort(typeId);
return "Media de horas del tipo de tarea: " + avgDailyEffort;
}
@RequestMapping(value= {"/ajax-date"})
public @ResponseBody String ajaxDate(@RequestParam("date") String date) {
Double tasksDuration = 0.;
DateFormat formatter = new SimpleDateFormat("dd/MM/yyyy");
try {
Date dateF = formatter.parse(date);
Collection<Task> tasks = taskService.findTasksDateUserType(dateF, dateF, getPrincipalUser().getId(), null);
tasksDuration = taskService.getTasksDuration(tasks);
} catch (ParseException e) {
e.printStackTrace();
}
return "Horas incurridas en la fecha: " + tasksDuration;
}
しかし、私はGET 404を取得しています私が両方のフィールドに変更を加えると、（見つからない）
私はそれを見て、その答えに感謝します！ –
あなたの答えに書いたすべての情報を読んだら、私は自分が望むものを知っていると思うが、私はそれを自分でやることはできない（またはチュートリアルに従う。 PHPでオブジェクトを削除または変更すること）。私はちょうどMySQL DBに挿入された値でクエリを作成し、jQueryを使用して入力の下に結果を出力したいと思います。 –
必要な値/オブジェクトを返すajaxの呼び出しのために、コントローラにいくつかの特定のマッピングを設定する必要があります。 '@RequestMapping（" ajax "）'などあなたの現在のコントローラを投稿することができれば、あなたのサーバ側のコードを見ておくと便利かもしれません。 – craigwor