无法使用 jquery 发布请求答案

【问题标题】：Unable to post request using jquery无法使用 jquery 发布请求
【发布时间】：2011-08-09 09:46:20
【问题描述】：

这是我的jsp页面

<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
    var jq = jQuery.noConflict();
    function add()
    {
        alert("inside add");
        jq(function() { 
            alert("inside jq function");
            jq.post("/ajax.htm",
                        {   inputNumber1:  jq("#inputNumber1").val(),
                            inputNumber2:  jq("#inputNumber2").val() },
                            function(data){
                                // data contains the result
                                // Assign result to the sum id
                                jq("#sum").replaceWith('<span id="sum">'+ data + '</span>');
                        });
        });

    }
</script>

<title>Spring MVC - jQuery Integration Tutorial</title>

</head>
<body>

<h3>Spring MVC - jQuery Integration Tutorial</h3>
<h4>AJAX version</h4>

Demo 1
<div style="border: 1px solid #ccc; width: 250px;">
    Add Two Numbers: <br/>
    <input id="inputNumber1" type="text" size="5"> +
    <input id="inputNumber2" type="text" size="5">
    <input type="submit" value="Add" onclick="add()" /> <br/>
    Sum: <span id="sum">(Result will be shown here)</span>
</div>
</body>
</html>

这是spring中的控制器

package com.vaannila.web;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/ajax.htm")
public class AjaxController {

    @RequestMapping(method = RequestMethod.GET)
    public String getAjaxAddPage() {
        System.out.println("inside get ajax add page");
        return "ajax";
    }

    @RequestMapping(method = RequestMethod.POST)
    public @ResponseBody Integer add(@RequestParam(value="inputNumber1", required=true) Integer inputNumber1,
                                @RequestParam(value="inputNumber2", required=true) Integer inputNumber2,
                                Model model) {
        System.out.println("inside post method");
        Integer sum=inputNumber1+inputNumber2;
        return sum;
    }
}

页面正在显示，但是输入两个数字后，当我按add时，函数add没有被调用。

【问题讨论】：

firebug 和 tomcat 控制台说什么？
我只收到“内部添加”警报，之后什么都没有显示
@elle - 是的，但是响应状态是什么？ Firebug应该说。另外，如果出现问题，spring 会在服务器日志中记录一条消息
我不知道萤火虫。我正在使用日食。
@elle - firebug 是浏览器中的必备工具，可让您调试 javascript。

标签： jquery ajax spring-mvc

【解决方案1】：

你的问题是这段代码

 jq(function() { 

            jq.post("/ajax.htm",
                        {   inputNumber1:  jq("#inputNumber1").val(),
                            inputNumber2:  jq("#inputNumber2").val() },
                            function(data){
                                // data contains the result
                                // Assign result to the sum id
            alert("inside jq function");
                                jq("#sum").replaceWith('<span id="sum">'+ data + '</span>');
                        });
        });

有点在“添加”调用之外。基本上那里的 yoru 代码只是告诉 add 函数注册一个 DOM 就绪事件处理程序。我认为您将一些概念混合在一起。试试这个代码

 function add()
    {
        alert("inside add");

            alert("inside jq function");
            jq.post("/ajax.htm",
                        {   inputNumber1:  jq("#inputNumber1").val(),
                            inputNumber2:  jq("#inputNumber2").val() },
                            function(data){
                                // data contains the result
                                // Assign result to the sum id
                                jq("#sum").replaceWith('<span id="sum">'+ data + '</span>');
                        });


    }

更新：尝试完整的 post 实现，它也可以让您指定错误处理程序。您的请求可能出错，这意味着您的回调将不会被调用。

 function add()
        {
            alert("inside add");


                jq.ajax({

                             url:"/ajax.htm",
                            success:function(){   inputNumber1:  jq("#inputNumber1").val(),
                                inputNumber2:  jq("#inputNumber2").val() },
                                function(data){
                                    // data contains the result
                                    // Assign result to the sum id
                                    jq("#sum").replaceWith('<span id="sum">'+ data +                    '</span>');
                                               }
                           error:function(jqXHR, textStatus, errorThrown){
                               alert("error");
                               alert(textStatus);
                           }

                       });


    }

【讨论】：

尝试更新的完整版本，看看您的请求是否真的出错了