简体   繁体   中英

GET request to spring from ajax

I am learning ajax and javascript. This is addition of 2 numbers using spring and ajax. I am getting The request sent by the client was syntactically incorrect error. Please help me.

Controller class

@Controller
public class SumWithAjaxSpringController {

    @Resource(name="sumWithAjaxService")
    private SumWithAjaxService sumWithAjaxService;

 @RequestMapping(value = "additionWithAjax", method = RequestMethod.GET)
     public String add(@RequestParam(value="value1", required=true) Integer value1,
                        @RequestParam(value="value2", required=true) Integer value2,) {

         Integer sum =  springService.add(value1, value2);

            return "additionWithAjax";
        }
}

service class

@Service("sumWithAjaxService")
@Transactional
public class SumWithAjaxService {

    public Integer add(Integer number1, Integer number2) {

        return number1+ number2;
    }
}

JSP

    <script type="text/javascript">
    function add() 
    {
        var xmlhttp;
        var value1 = document.getElementById("text1").value;
        var value2 = document.getElementById("text2").value;
        var url = "additionWithAjax";
        var parameters = "text1=" + value1 + "&text2=" + value2;

        if (window.XMLHttpRequest)
          { 
          xmlhttp=new XMLHttpRequest();
          }
        else
          { 
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }

        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("result").innerHTML=xmlhttp.responseText;

            }

          };
            xmlhttp.open("GET",url+"?"+parameters,true);
            xmlhttp.send();
        }
        </script>        
    </head>
    <body>

Enter 1st number : <input type="text" name="n1" id="text1"> 
Enter 2nd number : <input type="text" name="n2" id="text2"> 
<input type="button" id="calculate" value="calculate"
                    onclick="add()" />
Result :<span id="result" > </span>

</body>

web.xml

<servlet>
<servlet-name>spring</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
<servlet-name>spring</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>

<welcome-file-list>
       <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  </web-app>

@ResponseBody is missing .

The below method need to be re written

 @RequestMapping(value = "additionWithAjax", method = RequestMethod.GET)
     public String add(@RequestParam(value="value1", required=true) Integer value1,
                        @RequestParam(value="value2", required=true) Integer value2,) {

         Integer sum =  springService.add(value1, value2);

            return "additionWithAjax";
        }

into

@RequestMapping(value = "additionWithAjax", method = RequestMethod.GET)
     public @ResponseBody String  add(@RequestParam(value="value1", required=true) Integer value1,
                        @RequestParam(value="value2", required=true) Integer value2,) {

         Integer sum =  springService.add(value1, value2);

            return Integer.toString(sum );
        }

Change your controller method to following and try again.

@RequestMapping(value = "additionWithAjax/{value1}/{value2}", method = RequestMethod.GET)
public String add(@PathVariable("value1") Integer value1,
                  @PathVariable("value2") Integer value2) {
}

Send these values from your ajax URL. And while getting service instance in controller, you could use @autowired annotation instead of @Resource .

@Autowired
@Qualifier("sumWithAjaxService")
private SumWithAjaxService sumWithAjaxService;

From what I found in your request URL, You need to first handle the '/SumWithAjaxController' request mapping for your controller like this,

@Controller
@RequestMapping(value = "/SumWithAjaxController")
public class SumWithAjaxSpringController {

and then you have to add the remaining part '/additionWithAjax' to your method,

@RequestMapping(value = "/additionWithAjax", method = RequestMethod.GET)

Also there is one mistake in your js code that, you are adding the two parameters with names 'text1' and ''text2'. They will not be assigned to your controller method's parameter names with 'value1' and 'value2'. The parameter names must match.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM