Question

这是我的jsp页面

＆lt;％@ page language =“java”contentType =“text / html; charset = UTF-8” 的pageEncoding = “UTF-8” ％GT;

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

这是春天的控制器

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。

Answer 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>');
                        });


    }

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

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

                       });


    }

无法使用jquery发布请求

1 个答案: