Javascript 使用Ajax的Put方法（脚本未被触发）_Javascript_Ajax_Spring_Bootstrap 4_Thymeleaf

Javascript 使用Ajax的Put方法（脚本未被触发）

javascript ajax spring bootstrap-4

Javascript 使用Ajax的Put方法（脚本未被触发）,javascript,ajax,spring,bootstrap-4,thymeleaf,Javascript,Ajax,Spring,Bootstrap 4,Thymeleaf,我正在用Ajax实现Put方法： <!doctype html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascri

我正在用Ajax实现Put方法：

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#submitPut').click(  function () {
                console.log("click");
                var sendName = $('#name').val();
                var sendDescription = $('#description').val();

                $.ajax({
                    url: '/musicalstyle',    //Your api url
                    type: 'PUT',   //type is any HTTP method
                    data: {
                        name: sendName,
                        description: sendDescription,

                    },      //Data as js object
                    success: function () {
                    }
                })
                ;

            });
        });
    </script>
</head>
<body>
    <form> 
        <label for="name">Nombre</label>
        <input type="text" id="name"  />
        <label for="description">Descripción</label>
        <input type="text" name="description" id="description"/>
        <input id="submitPut" type="button"  value="SubmitPut">

    </form>
</body>
</html>


$（文档）.ready（函数（）{
$（'#submitPut'）。单击（函数（）{
控制台日志（“单击”）；
var sendName=$（'#name'）.val（）；
var sendDescription=$（'#description'）.val（）；
$.ajax({
url:“/musicalstyle”，//您的api url
类型：'PUT'，//类型是任何HTTP方法
数据：{
姓名：sendName，
description:sendDescription，
}，//数据作为js对象
成功：函数（）{
}
})
;
});
});
名义
描述

此表单工作正常，但在实际环境中引入它时，不会调用脚本（我在生产环境中的视图使用Thymeleaf和Boostrap）。这就像

Actualizar

没有触发submitPut函数一样

以下是生产环境的形式：

    <form>
        <div class="form-group row">
            <label for="name" class="col-sm-2 col-form-label">Nombre</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="name">
            </div>
         </div>
         <div class="form-group row">
            <label for="description" class="col-sm-2 col-form-label">Descripción</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="description">
            </div>
          </div>
          <br>
         <button class="btn btn-primary" id="submitPut" type="button">Actualizar</button>
    </form>


名义
描述


现实主义者

如何强制按钮调用ajax函数

谢谢，

当您在查询时调用onclick函数时，

submitPut

您的输入的id是
submit
。所以

当您在查询时调用onclick函数时，
submitPut
，输入的id是
submit
。所以

@Biplove我已经发表了我的评论。输入的Id等于onclick函数的名称。 @Biplove我已经编辑了我的评论。输入的Id等于onclick函数的名称。使用导入JQuery后 window.jQuery | | document.write（“ ”） Ajax被执行我放在控制器中的方法应该重定向到另一个视图，并且似乎正在重定向。Spring日志显示： 2020-05-21 16:04:15.367 DEBUG 552 --- [nio-8182-exec-9] o.s.web.servlet.DispatcherServlet : PUT "/musicalstyle", parameters={masked} 2020-05-21 16:04:15.368 DEBUG 552 --- [nio-8182-exec-9] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped to com.musicnet.springboot.controller.SystemAdministratorController#updateStyle(Style, Model) 2020-05-21 16:04:15.558 DEBUG 552 --- [nio-8182-exec-9] o.s.w.s.v.ContentNegotiatingViewResolver : Selected '*/*' given [*/*] 2020-05-21 16:04:15.632 DEBUG 552 --- [nio-8182-exec-9] o.s.web.servlet.DispatcherServlet : Completed 200 OK 在这里，样式已更新，因此put方法工作正常，但视图未显示在浏览器上。我怀疑Spring在重定向视图方面没有任何问题，问题是ajax脚本没有重定向到返回的视图如何修改ajax脚本来处理Spring返回的视图编辑事实上，我在ajax脚本中得到了重定向： success: function () { window.location.reload(); } 使用导入JQuery之后 window.jQuery | | document.write（“ ”） Ajax被执行我放在控制器中的方法应该重定向到另一个视图，并且似乎正在重定向。Spring日志显示： 2020-05-21 16:04:15.367 DEBUG 552 --- [nio-8182-exec-9] o.s.web.servlet.DispatcherServlet : PUT "/musicalstyle", parameters={masked} 2020-05-21 16:04:15.368 DEBUG 552 --- [nio-8182-exec-9] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped to com.musicnet.springboot.controller.SystemAdministratorController#updateStyle(Style, Model) 2020-05-21 16:04:15.558 DEBUG 552 --- [nio-8182-exec-9] o.s.w.s.v.ContentNegotiatingViewResolver : Selected '*/*' given [*/*] 2020-05-21 16:04:15.632 DEBUG 552 --- [nio-8182-exec-9] o.s.web.servlet.DispatcherServlet : Completed 200 OK 在这里，样式已更新，因此put方法工作正常，但视图未显示在浏览器上。我怀疑Spring在重定向视图方面没有任何问题，问题是ajax脚本没有重定向到返回的视图如何修改ajax脚本来处理Spring返回的视图编辑事实上，我在ajax脚本中得到了重定向： success: function () { window.location.reload(); } 您的代码运行正常，您的浏览器控制台是否有任何错误？此表单是否也是动态生成的？@Swati此表单不是动态生成的，而是生成同一页面中的其他表单。另外，浏览器控制台将显示下一个错误：uncaughttypeerror:$。ajax不是HTMLButtoneElement的函数。（音乐风格：42）在HTMLButtonElement.dispatch（VM26 jquery-3.5.1.slim.min.js:2）在HTMLButtonElement.v.handle（VM26 jquery-3.5.1.slim.min.js:2）你能展示一下你是如何导入jquery库和调用ajax函数的整个脚本的吗？检查答案这将解决你的问题。@Swati似乎如你所示，我应该使用导入JQuery您的代码工作正常，您的浏览器控制台是否有任何错误？此表单是否也是动态生成的？@Swati此表单不是动态生成的，而是生成同一页面中的其他表单。另外，浏览器控制台将显示下一个错误：uncaughttypeerror:$。ajax不是HTMLButtoneElement的函数。（音乐风格：42）在HTMLButtonElement.dispatch（VM26 jquery-3.5.1.slim.min.js:2）在HTMLButtonElement.v.handle（VM26 jquery-3.5.1.slim.min.js:2）你能展示一下你是如何导入jquery库和调用ajax函数的整个脚本的吗？检查答案这将解决你的问题。@Swati似乎如你所示，我应该导入带有