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

更改此：

id至class：
```
<form class="commentSubmit">
```

这里：

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

阻止表单的提交：

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

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

提示：使用jQuery的serialize获取整个表单数据：

$.ajax({
    data: $(this).serialize() // Being 'this' the form when inside the 'submit' event

Answer 2

尝试一下：

<form method="post" id="commentSubmit" name="commentSubmit" action="#" autocomplete="off" enctype="multipart/form-data">
  <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 #" />
    <button type="submit" class="k-button k-primary" id="btnSubmit" form="commentSubmit">Add Comment</button>
  </div>
</form>                                             

$("#commentSubmit").submit(function (e) {
    e.preventDefault();
    $.ajax({
        url: "url.to.post",
        type: "POST",
        data: {
            "body": $("#bodyComment").val(),
            "post_id": $("#post_idComment").val()
        }
    });
}

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

2 个答案: