調用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試過了，但得到了同樣的錯誤。如果我從我的選擇標記中刪除「onchange = doAjaxPost（）」 - 錯誤未顯示，但也沒有任何反應。 – Volcano91

更新您的問題，以便我們可以看到您所做的事情。 –

有兩個不同的問題：

你試圖在HTML中使用的onxyz -attribute式的處理程序。那些只能訪問全球功能。（這是不使用它們的許多原因之一）。您的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

廣場$("#selectCategory").on("change", doAjaxPost());內document.ready() 回調函數

來源

2017-04-22 16:12:34 Mamun

調用JavaScript函數時JSP上沒有任何反應

回答

相關問題