1

我正在学习ajax。请找到以下代码，

     <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
         pageEncoding="ISO-8859-1"%>
     <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org         /TR/html4/loose.dtd">
     <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
     <title>Insert title here</title>
     <script type="text/javascript" src="/MyApp/js/jquery.js"></script>
     <script type="text/javascript">
         function doAjax() {
             alert('yes');
           $.ajax({
             url: 'register.html',
             data: ({name : "me"}),
             success: function(data) {
               $('#time').html(data);
             }
           });
         }
       </script>  
     </head>
     <body>
     <form action="">
     <button id="demo" onclick="doAjax()" title="Button">Get the time!</button>
     <div id="time">
     </div>
     </form>
     </body>
     </html>

此代码对我的 spring 控制器进行成功的 ajax 调用，并且仅当我删除表单标签时才返回数据，否则它不会显示 ajax 消息（也没有错误）。

我检查了日志。如果我删除表单标签，收到的最后一个请求是“register.html”，这是非常正确的。如果我放置表单标签，点击按钮，请求转到“hello.html”，这是包含上述代码的页面。我无法理解这是怎么回事。

我怀疑的一件事是形式正在被提交。但是，如果我没有在单击按钮时触发 sumit 事件，这怎么可能发生。

我需要在这个页面上有表单标签，所以请指教。

下面的控制器功能，

     @RequestMapping("/hello")
           public ModelAndView helloWorld() {
           return new ModelAndView("hello", "message", "Spring MVC Demo");
           }

     @RequestMapping(value = "/register", method = RequestMethod.GET)
           public @ResponseBody String registerUser(@RequestParam String name) {
             String result = "Time for registration" + name + " is " + new Date().toString();
             return result;
           }
4

2 回答 2

1

首先，如果您在html表单浏览器中使用按钮标签，可能会被解释为提交请求。这就是为什么您使用不再是 ajax 请求的形式按下按钮的原因。当您呈现主页时，可能会注意到 url 类似于 localhost:8000/home 但在按钮单击之后 url 将是 localhost:8000/home？这表示有一个正常的获取请求

如果您仍然希望按钮在表单内创建 ajax 请求，请执行以下操作：

 <script type="text/javascript">
 $(function(){
    $('button').click(function(e){
        e.preventDefault();
        doAjax();
    })
 })


     function doAjax() {
         alert('yes');
       $.ajax({
         url: '/register/',
         data: ({name : "me"}),
         success: function(data) {
           $('#time').html(data);
         }
       });
     }
   </script>  
 </head>
 <body>
    <form action="">
 <button id="demo" title="Button">Get the time!</button>
 </form>
 <div id="time">
 </div>

其次，尝试将 Ajax 函数中的 url 更改为“/register.html/”。注意斜线。因为在某些情况下，jquery 可能会建议将给定的 url 附加到页面的 url。

例如，如果您的页面 url 是 localhost:8000/home。生成的请求可能是 localhost:8000/home/register。因此，在定义 url 时使用斜杠总是一个好主意。

Laslty，尝试使用其他扩展而不是 html，因为 html 通常用于生成静态内容，而用于动态内容的修道院是 htm。它只是一个好的练习休息的惯例是你的选择。

于 2012-11-10T19:48:24.053 回答
0

如果您希望按钮提交表单，请给它一种“提交”。此外，不要为按钮元素使用内联 onclick 处理程序，而是为表单定义一个提交处理程序。

于 2012-11-10T19:49:50.420 回答