JavaScriptを呼び出すときにJSPで何も起こらない

Webアプリケーションを作成し、Ajaxの仕組みを理解しようとします。カテゴリを選択しようとしてもエラーは発生しません。JavaScriptを呼び出すときにJSPで何も起こらない

JSPページ：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> 
<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
<html> 
<head> 
<link media="all" rel="stylesheet" type="text/css" href="resources/css/all.css" />     
<script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"/> 
<script type="text/javascript"> 
    var categoryName; 
    $(document).ready(function() { 
     function doAjaxPost(){ 
      categoryName = $('#selectCategory').val(); 
      $.ajax({ 
       type : "Get", 
       url : "loadProducts", 
       data : "Category selected =" + categoryName, 
       success : function(response) { 
        alert(response); 
       }, 
       error : function(e) { 
        alert('Error: ' + e); 
       } 
      }); 
     } 
    }); 
    $("#selectCategory").on("change", doAjaxPost()); 
</script> 


<title>Waiter</title> 
</head> 
<body> 
<h3>Waiter's page </h3> 
<h2> 
Welcome : ${pageContext.request.userPrincipal.name} 
<a href="/logout" class="btn-on">Logout</a> 
</h2> 
<br> 
<c:if test="${!empty productCategoriesList}"> 
    <spring:message code="label.category" /> 
    <select id="selectCategory" name="productCategory"> 
     <option value=" "></option> 
     <c:forEach items="${productCategoriesList}" var="productCategory"> 
      <option value=${productCategory.id}>${productCategory.productType}</option> 
     </c:forEach> 
    </select> 
</c:if> 

<div id = "product"> 
    <spring:message code="label.product" /> 
    <select> 
     <option value = ""></option> 
    </select> 
</div>

マイ春コントローラー：

@RequestMapping(value = "/loadProducts") 
public @ResponseBody String loadProducts(@RequestParam("categoryName") 
String categoryName){ 
    System.out.println(categoryName); 
    String str = "Category selected: " + categoryName; 
    return str; 
}

この機能を動作させるために何をすべきか？

出典

2017-04-22 Volcano91

は、あなたの 'の（ '変更'）'関数を移動してみてくださいあなたの '$（document）.ready（）'関数の中で – Lixus

@Lixusそれを試しましたが、同じエラーが発生しました。 selectタグから "onchange = doAjaxPost（）"を削除すると、エラーは表示されませんが、何も起こりません。 – Volcano91

質問を更新して、あなたが行ったことを確認してください。 –

がある二つの別々の問題内側場所$("#selectCategory").on("change", doAjaxPost());：あなたがHTMLにonxyz -attributeスタイルのハンドラを使用しようとしている

。それらはグローバルの機能にしかアクセスできません。（それはそれらを使用しない多くの理由の1つです）あなたのdoAjaxPost機能はグローバルではありません。
jQueryのonでコードをフックしようとするコードはグローバルスコープであるため、グローバルにするにはdoAjaxPostが必要です。 ™

あなたはそれはグローバル（あなたreadyコールバックの外に宣言を移動）することによってこの問題を解決できますが、グローバルは悪いことです。代わりに

、あなたのonコールにreadyハンドラを移動し、HTMLでonchange="doAjaxCall()"を削除します。

var categoryName; 
$(document).ready(function() { 
    function doAjaxPost(){ 
     categoryName = $('#selectCategory').val(); 
     $.ajax({ 
      type : "Get", 
      url : "loadProducts", 
      data : "Category selected =" + categoryName, 
      success : function(response) { 
       alert(response); 
      }, 
      error : function(e) { 
       alert('Error: ' + e); 
      } 
     }); 
    } 
    $("#selectCategory").on("change", doAjaxPost()); }); // ** Moved**

と

<select id="selectCategory" name="productCategory"> 
<!-- No onchange --------------------------------^ -->

出典

2017-04-22 16:13:04

ありがとう、あなたの答えです。それを行い、エラーが解消されました。しかし、私が理解しているように、応答が正しく返されることを示すために、いくつかのアラートウィンドウが表示されなければなりません。しかし、何も表示されていません。 – Volcano91

document.ready() コールバック機能

出典

2017-04-22 16:12:34 Mamun

JavaScriptを呼び出すときにJSPで何も起こらない

答えて

関連する問題