Question

我编写了一个Web应用程序并尝试了解Ajax的工作原理。当我尝试选择一个类别并且没有发生错误时，没有任何反应。

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;
}

为了使这个功能有效，应该做些什么？

Answer 1

将$("#selectCategory").on("change", doAjaxPost());放在document.ready()内回电功能

Answer 2

有两个不同的问题：

您正在尝试在HTML中使用function remove(username, track) { //window.some_variable = '<?=$_GET[user]?>'; if(username && track) { $.ajax ({ type:'post', url: 'delete_proc_admin.php', data: { user_name:username, user_track:track }, success: function (response) { $('#'+username+track).remove(); return alert (username +" "+ track); } }); } return false; } - 属性样式处理程序。这些只能访问全局功能。（这是不使用它们的众多原因之一。）您的onxyz功能不是全局的。
您的代码试图将其与jQuery的doAjaxPost联系起来，这在全球范围内，因此它也需要on为全局。

你可以通过使其全局化（将声明移到doAjaxPost回调之外）来解决此问题，但全局变量是一件坏事。

相反，将ready调用移至 on处理程序，然后删除HTML中的ready：

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**

调用JavaScript函数时，JSP上没有任何反应

2 个答案: