Невозможно опубликовать запрос с помощью jquery - PullRequest
Новая
       2

Невозможно опубликовать запрос с помощью jquery

0 голосов
/ 20 апреля 2011

Это моя страница JSP

<% @ page language = "java" contentType = "text / html; charset = UTF-8" pageEncoding = "UTF-8" %> 

<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, функция add не вызывается.

1 Ответ

0 голосов
/ 20 апреля 2011

Ваша проблема в том, что этот бит кода 

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

находится вне вызова "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);
                           }

                       });


    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...