如何在MVC中使用Ajax提交表单

Question

我在将表单数据保存在数据库中时遇到问题。 我在下面显示的代码上完成了小代码，当我在表单中输入数据并单击我的提交按钮时，它不起作用。

 $(".btn").click(function(e) { e.preventDefault(); var form = $("#frm"); $.ajax({ url: '/Form/Index', data: form.serialize(), type: 'POST', success: function(data) { } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form role="form" id="frm"> <div class="form-group"> <div class="col-sm-6 col-lg-12 col-md-12"> <div class="form-group"> <label for="name" style="color:black;">Product Name</label> <input type="text" class="form-control" id="name" placeholder="Product Name" style="color:black;"> </div> <div class="form-group"> <label for="name" style="color:black;">Product Date</label> <input type="text" class="form-control" id="Text1" placeholder="Date" style="color:black;"> </div> <div class="form-group"> <label for="name" style="color:black;">Product Price</label> <input type="text" class="form-control" id="Text2" placeholder="Date" style="color:black;"> </div> </div> </div> <button type="submit" class="btn btn-default" id="ok" >Submit</button> </form> 

以上是我的代码，请给我解决方案

Answer 1

我检查了您的代码后，客户端代码工作正常，在这种情况下，我能想象的唯一问题是url path 。

• 确保您提供正确的url path 。

• 您应该检查其是否到达该页面。

Answer 2

您正在使用哪个框架。 不同的框架具有不同的语法以在URL中传递值。 在URL参数中检查在页面源页面视图中获取的路径，或者可以在提交后在控制台日志中检查错误。 可能无法正确执行操作。

Answer 3

从按钮中删除type =“ submit”

您必须获取具有ID的表单提交并序列化表单数据`

$("#formid").submit(function(e) {
var url = "urlpathtohandlerequest"; 

$.ajax({
       type: "POST",
       url: url,
       data: $("#formid").serialize(), 
       success: function(response)
       {
           alert(response); 
       }
     });

e.preventDefault(); // stops default submit.
});

`

Answer 4

确保ajax库已成功加载，并尝试发出警报消息以将到达的转发步骤进行以下测试：

$(".btn").click(function(e) {
    e.preventDefault();

    var form = $("#frm");

    $.ajax({
        url: '/Form/Index',
        data: form.serialize(),
        type: 'POST',
        success: function(data) {
        },
        beforeSend: function() {
             alert('before send alert')
        },
        error: function (request, status, error) {
             alert(error);
        },
    });
});

如果未执行beforeSend，则您的问题与ajax库有关。

Answer 5

用这个 ：

$("#ok").click(function(e) {
 // your code 
}

请参考javascript中的id而不是class属性。 如果您引用的类属性超过一次，则单击javascript对该类执行preventDefault，这样，如果不刷新您的页面，则该按钮不起作用。

将preventDefault函数放在函数的最后。