提交表单的jQuery阿贾克斯 [英] Submit form with jquery ajax

问题描述

我想学MVC和一个我想要做的事是提交表单在我的控制器的动作，因此这个动作将返回提交的数据。听起来简单，但我一直在努力了几个小时没有任何成功。
我的观点：

  @using（Html.BeginForm（BlogComment，博客））
 {
     @ Html.ValidationSummary（真）
    ＆LT;传说级=AddAComment＆gt;添加注释＆LT; /传说＆GT;    ＆LT; D​​IV CLASS =commentformwrapper＆GT;        ＆LT; D​​IV CLASS =编辑文本＆GT;
        ＆LT;跨度类=编辑标签＆gt;用户名：​​LT; / SPAN＆GT;
        ＆LT; / DIV＆GT;        ＆LT; D​​IV CLASS =编辑文本＆GT;
        ＆LT;输入类型=文本ID =用户名/＆GT;
        ＆LT; / DIV＆GT;        ＆LT; D​​IV CLASS =编辑文本＆GT;
        ＆LT; textarea的ID =注释行=6COLS =23＆GT;＆LT; / textarea的＆GT;
        ＆LT; / DIV＆GT;        ＆LT; D​​IV CLASS =主编场＆GT;
        ＆LT;输入类型=隐藏ID =hiddendate/＆GT;
        ＆LT; / DIV＆GT;        ＆LT;输入类型=提交ID =提交值=创建/＆GT;    ＆LT; / DIV＆GT;
}
 

我的控制器：

  [HttpPost]
公众的ActionResult CommentForm（评论评论）
{
    评论ajaxComment =新评论（）;
    ajaxComment.CommentText = comment.UserName;
    ajaxComment.DateCreated = comment.DateCreated;
    ajaxComment.PostId = comment.PostId;
    ajaxComment.UserName = comment.UserName;    mRep.Add（ajaxComment）;
    uow.Save（）;
    //获取给定文章ID的所有评论    返回JSON（ajaxComment）;
}
 

和我的JS：

  $（文件）。就绪（函数（）{        $（'形式'）。提交（函数（）{            $阿贾克斯（{
                网址：'@ Url.Action（CommentForm）'，
                键入：POST，
                数据类型：JSON
                的contentType：应用/ JSON的;字符集= UTF-8，
                数据：{
                    帖子ID：$（'。帖子ID）VAL（）。
                    用户名：$（'＃用户名）VAL（）。
                    dateCreated会：新的Date（）
                    CommentText：$（'＃注释）VAL（）。
                }，
                成功：函数（结果）{                    警报（成功+ result.UserName）;
                }，
                错误：功能（结果）{
                    警报（失败）;
                }
            }）;
          返回false;
        }）;
    }）;
 

解决方案

基本上你是直接传递JavaScript对象文字。所以，你将数据传递到控制器之前，它必须在 JSON 格式（因为你已经指定的应用程序/ JSON。看到你的$就调用）。

所以，你缺少JSON.stringify（）

 数据：JSON.stringify（{
                        帖子ID：$（'。帖子ID）VAL（）。
                        用户名：$（'＃用户名）VAL（）。
                        dateCreated会：新的Date（）
                        CommentText：$（'＃注释）VAL（）。
                    }），
 

或

  VAR someObj中= {
            帖子ID：$（'。帖子ID）VAL（）。
            用户名：$（'＃用户名）VAL（）。
            dateCreated会：新的Date（）
            CommentText：$（'＃注释）VAL（）。
        };         $阿贾克斯（{
            ///你的另一code
            数据：JSON.stringify（someObj中）
            //你的code休息        }）;
 

I'm trying to learn MVC and one the things I want to do is submit a form to an action in my controller and this action will return the submitted data. Sounds simple but I've been trying for hours without any success. my view:

 @using (Html.BeginForm("BlogComment","Blog"))
 {
     @Html.ValidationSummary(true)
    <legend class="AddAComment">Add a comment</legend>

    <div class="commentformwrapper">

        <div class="editor-text">
        <span class="editor-label">User Name:</span>
        </div>

        <div class="editor-text">
        <input type="text" id="username" />
        </div>

        <div class="editor-text">
        <textarea id="comment" rows="6" cols="23"></textarea>
        </div>

        <div class="editor-field">
        <input type="hidden" id="hiddendate" />
        </div>

        <input type="submit" id="submit" value="Create" />

    </div>
}

my controller:

[HttpPost]   
public ActionResult CommentForm(Comment comment)
{
    Comment ajaxComment = new Comment();
    ajaxComment.CommentText = comment.UserName;
    ajaxComment.DateCreated = comment.DateCreated;
    ajaxComment.PostId = comment.PostId;
    ajaxComment.UserName = comment.UserName;

    mRep.Add(ajaxComment);
    uow.Save();
    //Get all the comments for the given post id

    return Json(ajaxComment);
}

and my js:

 $(document).ready(function () {

        $('form').submit(function () {

            $.ajax({
                url: '@Url.Action("CommentForm")',
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: {
                    PostId: $('.postid').val(),
                    UserName: $('#username').val(),
                    DateCreated: new Date(),
                    CommentText: $('#comment').val()
                },
                success: function (result) {

                    alert("success " + result.UserName);
                },
                error: function (result) {
                    alert("Failed");
                }
            });
          return false;
        });
    });

解决方案

Basically you are passing javascript object literals directly. So, before you pass data to your controller, it must be in JSON format(because you have specified application/json. see your $.ajax call).
SO, you are missing JSON.stringify()

data: JSON.stringify({
                        PostId: $('.postid').val(),
                        UserName: $('#username').val(),
                        DateCreated: new Date(),
                        CommentText: $('#comment').val()
                    }),

OR

var someObj = {
            PostId: $('.postid').val(),
            UserName: $('#username').val(),
            DateCreated: new Date(),
            CommentText: $('#comment').val()
        };

         $.ajax({
            /// your other code
            data: JSON.stringify(someObj),
            // your rest of the code

        });

这篇关于提交表单的jQuery阿贾克斯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！