表单（Ajax）发布在KendoUI模板中

Question

我需要在KendoUI模板中创建一个Form Post（Ajax），遗憾的是没有成功。

<form id="commentSubmit">
  <div class="form-group">
   <textarea class="form-control k-textbox" name="body" id="bodyComment"></textarea>
   <input type="hidden" name="post_id" id="post_idComment" value="#= id #" />
  </div>
  <div class="form-group">
   <button class="k-button k-primary" type="submit">Add Comment</button>
  </div>
</form>

我们有一个带有id #commentSubmit的Ajax帖子的脚本，但它不起作用。

$(document).ready(function() {
$('#commentSubmit').submit(function() {
$.ajax({
   url: "url.to.post",
   method: "POST",
   dataType: "json",
   data: {
   "body": $("#bodyComment").val(),
    "post_id" : $("#post_idComment").val()
   },
....

我们在网上找到了类似的东西

<form action="http://url.to.post" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="\#template" id="form0" method="post"> 

但它重定向到URL，这是我们不想要的。

有什么建议吗？

Answer 1

改变这个：

1. qazxsw poi to qazxsw poi： qazxsw poi
2. 这里也： id
3. 防止表单提交： qazxsw poi

这应该使任何表单的提交添加模板与类class被拦截和处理ajax请求。

提示：使用jQuery的<form class="commentSubmit"> 获取整个表单数据：

$(document).on('submit', '.commentSubmit', function() {

Answer 2

试试这个：

$(document).on('submit', '.commentSubmit', function(e) {
    e.preventDefault();