Ajax表单提交刷新页面

Question

I'm working on this project and am attempting to make a call to a controller function without performing a page refresh. I tried setting up an ajax function in order to do this but haven't had any luck. I've placed the related script both in the html and in a separate jquery.js but to no avail. It appears as if the form submission just isn't hitting the script at all. Any help would be greatly appreciated!! The form is in a cshtml file, controller in .cs, and script in .js

the form in question:

<form id="tableForm"  action="@(Url.Action("AddToOrder", "Order"))" method="post">
                                    @{foreach (var item in (IList<Item>)ViewData["items"]){
                                    <input type="hidden" id="@("item_id_" + item.id)" name="@("item_id_" + item.id)" value="@item.id" />
                                    <tr>
                                        <td>@item.description</td>
                                        <td>@String.Format("{0:C}",item.price)</td>
                                        <td><input type="text" id="@("item_quantity_" + @item.id)" name="@("item_quantity_" + @item.id)" style="width: 50px;" value="0" /></td>
                                     </tr>
                                      }}
                                    <tr>
                                        <td><input class="submit" type="submit" value="Add item(s) to order" /></td>
                                    </tr>
                                </form>

the script in question:

$('#tableForm').submit(function (e) {
e.preventDefault();
    $.ajax({
        type: "POST",
        cache: false,
        url: $(this).attr('action'),
        data: $(this).serialize(),
        succes: function (data) {
            alert(data);
        },
        error: function (jXHR, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
});

To reiterate, the controller and method are working great, but the form submission refreshes the page.

Answer 1

refer the below code, call the preventdetfault after the submission

$('#tableForm').submit(function (e) {
    $.ajax({
        type: "POST",
        cache: false,
        url: $(this).attr('action'),
        data: $(this).serialize(),
        succes: function (data) {
            alert(data);
        },
        error: function (jXHR, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
    e.preventDefault();
    });

Answer 2

Is your AJAX method getting called on page submission. Try adding an alert to confirm that. You might want to add ClientIdMOde="static" to your form tag, so that if it is with in master page the control id will be static and JS can bind to it.

May be clientidmode will do the trick. Let me know if it doesn't

Answer 3

Without your full page shown, I can only make an educated guess: that you have included your .js file at the top of the page or in the head element .

That means that the following code does nothing (returns an empty jQuery object):

$('#tableForm')

That is because the code runs as soon as it is loaded/defined and the form element it references has not been loaded yet.

The simply solution is: to either put your JS code at the end of the body element, or wrap it in a DOM-ready event handler. The handler is preferred as you can be moved about the page without failing:

eg

$(function(){
   // your jQuery code here can now use the DOM safely
});

which is a shortcut for this:

$(document).ready(function(){
   // your jQuery code here can now use the DOM safely
});

That means you code will now look like:

$(function(){
    $('#tableForm').submit(function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            cache: false,
            url: $(this).attr('action'),
            data: $(this).serialize(),
            succes: function (data) {
                alert(data);
            },
            error: function (jXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    });
});

If it still fails, the usual cause in a Javascript error preceding your code (missing jQuery library include etc). You will need to show your entire page to clarify that though.