如何通过 jQuery 提交表单并刷新 PartialView答案

【问题标题】：How to submit form via jQuery and refresh PartialView如何通过 jQuery 提交表单并刷新 PartialView
【发布时间】：2009-07-16 20:16:22
【问题描述】：

Stackoverflow 做得很好，提交评论并使用 jQuery 在屏幕上刷新。 它是如何完成的？

我正在剖析代码来学习。

看起来它正在这里发生：在下面的 html 中，链接点击事件由 jQuery 绑定以将文本区域加载到动态表单。 提交按钮是如何连接的，数据是如何发送到服务器的？

<div class="post-comments">
    <div id="comments-1122543" class="display-none comments-container">
        <div class="comments">                
        </div>        
        <form id="form-comments-1122543" class="post-comments"></form>        
    </div>    
    <a id="comments-link-1122543" class="comments-link" title="add a comment to this post">add comment</a>
</div>

和javascript：

var j = function (s, v) {
    var r = $("#form-comments-" + s);
    if (r.length > 0) {
        var u = '<table><tr><td><textarea name="comment" cols="68" rows="3" maxlength="' + q;
        u += '" onblur="comments.updateTextCounter(this)" ';
        u += 'onfocus="comments.updateTextCounter(this)" onkeyup="comments.updateTextCounter(this)"></textarea>';
        u += '<input type="submit" value="Add Comment" /></td></tr><tr><td><span class="text-counter"></span>';
        u += '<span class="form-error"></span></td></tr></table>';
        r.append(u);
        r.validate({
            rules: {
                comment: {
                    required: true,
                    minlength: 15
                }
            },
            errorElement: "span",
            errorClass: "form-error",
            errorPlacement: function (y, z) {
                var A = z.parents("form").find("span.form-error");
                A.replaceWith(y)
            },
            submitHandler: function (y) {
                disableSubmitButton($(y));
                g(s, $(y))
            }
        });
        var t = $("#comments-" + s + " tr.comment:first td.comment-actions").width() || -1;
        t += 9;
        r.children("table").css("margin-left", t + "px")
    } else {
        var w = "no-posting-msg-" + s;
        if ($("#" + w).length == 0) {
            var x = $("#can-post-comments-msg-" + s).val();
            v.append('<div id="' + w + '" style="color:maroon">' + x + "</span>")
        }
    }
};

【问题讨论】：

标签： jquery forms

【解决方案1】：

这就是我最终复制功能的方式；

<div id="issueComments">
<% Html.RenderPartial("CommentHistory", Model.Comments); %>
<a id="comments-link-<%= Html.Encode(Model.Issue.IssueId) %>" class="comments-link" title="add a comment to this issue">Add comment</a>
<div id="issue-comment-form">
<form id="form-comments-<%= Html.Encode(Model.Issue.IssueId) %>" class="post-comments" method="post">
<table><tr><td><textarea class="wmd-ignore" name="comment" cols="68" rows="3" id="form-comment-<%= Html.Encode(Model.Issue.IssueId) %>"></textarea>
<input type="submit" value="Add Comment" /></td></tr><tr><td><span class="text-counter"></span>
<span class="form-error"></span></td></tr></table>
</form></div>
</div>

jQuery

<script type="text/javascript">
$("#form-comments-<%= Html.Encode(Model.Issue.IssueId) %>").submit(function(evt) {
   var frm = $("#form-comments-<%= Html.Encode(Model.Issue.IssueId) %>");
   evt.preventDefault();
   var action = frm.attr("action");
   var serializedForm = frm.serialize();
   var comments = jQuery.trim($("#form-comment-<%= Html.Encode(Model.Issue.IssueId) %>").val());
     if (comments.length < 1)
        return;
      // POST HERE
   $.ajax({
       type: "POST",
       url: "/Issue/" + "SaveIssueComment",
       dataType: "html",
       data: {
         comment: comments,
         issueId: issueId
        },
       success: function(v) {
       $("div#issueComments").html(v);                
        },
       error: function(v, x, w) {
        //Error
        }
     });
    });
</script>

【讨论】：

【解决方案2】：

您可以使用 AJAX 将表单发送到服务器，并使用 JavaScript 轻松更新页面内容。

如果您使用 jQuery，则有一个 method 用于使用 HTTP POST 方法发送表单以及method 用于序列化表单数据：

$.post('/url', $('#formId').serialize(), function () {
    // do something after submiting the form i.e. update current page layout
});

【讨论】：