Unable to post request using jquery
This is my jsp page
<%@ 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>
This is the controller in 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;
}
}
The page is being displayed, but after entering two numbers, when I press add, the function add is not being called.
Your problem is that this bit of code
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>');
});
});
is sort of outside the "add" call. Basically yoru code up there simply tells the add function to register a DOM ready event handler. I think you have kind of mixed a few concepts together. Try this code
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>');
});
}
Update: Try the full blown post implementation that lets you specify an error handler too. Your request might be erroring which would mean your callback won't be called.
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);
}
});
}
加载中,请稍侯......
精彩评论