Question

我正在学习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;
           }

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

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

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

Answer 2

如果您希望按钮提交表单，请为其提供“提交”类型。此外，不是为按钮元素使用内联onclick处理程序，而是为表单定义提交处理程序。

使用<form>时$ .ajax函数不起作用</form>

2 个答案: