jquery AJAX 表单发布-不传递数据

sh7euo9m  于 2022-11-22  发布在  jQuery
关注(0)|答案(3)|浏览(190)

我有一个表单没有被传递到我的控制器。它正在访问控制器方法,但在传递任何参数时失败,'jsonString' 始终为NULL。

**注意:我也尝试过使用@razor w. model绑定,但遇到了同样的问题。
表格:

<form id="CarreersForm">
            <div class="form-group">
                @Html.Label("Name")<br />
                @Html.TextBoxFor(m => m.name)  
            </div>
            <div class="form-group">
                @Html.Label("Phone")<br />
                @Html.TextBoxFor(m => m.phone)
                @Html.ValidationMessage("Phone", new { @class = "text-danger" })
            </div>
            <div class="form-group">
                @Html.Label("Email")<br />
                @Html.TextBoxFor(m => m.email) 
            </div>   
            <div class="form-group">
                <input type="file" id="filepath" name="filepath" value="Upload Resume" class="btn btn-default" />
            <input type="submit" name="submit" id="submit" value="submit" />
        </form>

JS/ AJAX :

<script>
    $(function () {
        $("#submit").click(function (e) {
            e.preventDefault();
            var formData = {
                "name": $("#CarreersForm  #name").val(),
                "phone": $("#CarreersForm  #phone").val(),
                "email": $("#CarreersForm  #email").val(),
                "filepath": $("#CarreersForm  #filepath").val(),
            };
            var jsonString = JSON.stringify(formData);
            console.log(jsonString);
            $.ajax({
                type: 'POST',
                data: jsonString,
                url: "@Url.Action("CarreersForm")",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                cache: false,
                success: function (response) {
                    if (response == 'True') {
                        alert("The form was successfully submitted.");
                        $("#contactUs form input").val("");
                    }
                    if (response == 'False') {
                        alert("There was an error submitting the form. Fill in all of the form fields with no errors.");
                    }
                },
                error: function (response) {
                    alert("There was an error submitting the form. Fill in all of the form fields with no errors.");
                }
            });
        });
    });
</script>

控制器:

//Current Method
[HttpPost]
public bool CarreersForm(string jsonString)   
{
    return false;
}

HTTP POST的副本

NEW REQUEST
POST http://localhost:51721/Transportation/CarreersForm

REQUEST HEADERS:
Content-Type: application/json; charset=utf-8
X-Requested-With: XMLHttpRequest
Referer: http://localhost:51721/Transportation/Careers
Content-Length: 95
Cache-Control: no-cache

REQUEST BODY
{"name":"Mark","phone":"123456789","email":"email@emailaccount.com","filepath":"logo_main.png"}

工作机会型号:

public class CareersModel
    {

        [Required]
        public string name { get; set; }

        public string job { get; set; }

        [Required]
        [EmailAddress]
        public string email { get; set; }

        [Phone]
        public string phone { get; set; }

        [Required]
        public HttpPostedFileBase filepath { get; set; }

    }

我也尝试过直接传递模型:

[HttpPost]
        public bool CarreersForm(ContactForm model)   
        {

             if (!ModelState.IsValid){
                    return false;
              }
         return true;
     }
ycggw6v2

ycggw6v21#

我很确定这是因为您没有在表单上设置正确的编码类型。请将其更改为以下格式以允许上载文件,这样就可以成功提交您的模型。

<form id="CarreersForm" enctype="multipart/form-data">

**另外:您将无法使用jQuery AJAX 请求上传文档。**它必须是标准的post请求,或者使用允许ajaxified文件上传的插件。

c9qzyr3d

c9qzyr3d2#

var formData = new FormData($("#CarreersForm")[0]);

AJAX 中用于数据传递“数据:jsonString,”

50few1ms

50few1ms3#

e.preventDefault()就是问题所在。它应该放在代码安排的最后,因为它只会阻止表单的默认操作跟随表单action属性中提供的链接。
e.preventDefault()可能会阻止您的表单传递表单参数,因为它会传回false,而且您的其他命令尚未执行。
还要记住,e.preventDefault()方法应该是在表单对象本身上调用的,而您是在submit按钮的click事件处理程序上调用它的。
此外,设置请求头还会阻止 AJAX 将表单参数传递给PHP处理文件。

相关问题