如果没有页面刷新,ajax表单将不会重新提交

时间:2016-09-04 17:24:36

标签: javascript php jquery html ajax

这里有一点神秘的问题......

我在页面上构建了一个提交表单的按钮。表单嵌入了DIV,DIV会更新以显示修改后的数据。

(它在一个聪明的模板中)

形式:

public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.MapRoute(null, "Page{page}",
            new
            {
                controller = "Product",
                action = "List",
                category =
                    (string)null
            },
            new { page = @"\d+" }
            );
            routes.MapRoute(null,
            "{category}",
            new { controller = "Product", action = "List", page = 1 }
            );
            routes.MapRoute(null,
            "{category}/Page{page}",
            new { controller = "Product", action = "List" },
            new { page = @"\d+" }
            );
            routes.MapRoute(null, "{controller}/{action}");

            routes.MapRoute(
            "Images",
            "{controller}/{action}/{id}/{name}",
            new { controller = "Product", action = "GetMainPicture", id = UrlParameter.Optional },
            new[] { "mynamespace.Controllers" }
        );


            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }

JS

<form id='itempost_{$item.itemid}_{$item2.itemid}' method='post' class='itempost'>
     <input type='hidden' name='item' value='{$item.itemid}'>
     <input class='btn_text' type="submit" value="Send Item">
</form>

update.php

所有update.php包含是重建页面所必需的最小值,然后它重建位于div #update中的模板部分。

$('.itempost').on('submit', function(e) {

    e.preventDefault();
    $.ajax({
        type: "POST",
        url : 'item.php',
        data: $(this).serialize(),
        success : function (response) {
        $("#update").eq(0).load("update.php?&t={$parentid}");

        },
        error: function (jXHR, textStatus, errorThrown) {
        alert('not ok');
            alert(errorThrown);
        }
    });
    return false;
});

第一次单击该按钮时,它的工作效果非常好,HTML内容也会发生变化而对页面没有任何明显影响。

然而,第二次点击似乎没有在JS附近,只是重新加载页面。下面的点击然后按预期工作,让我相信行动是:

第一次点击:按照设计使用AJAX提交表单 第二次点击:刷新页面,不做任何其他事情 第3次点击:按照设计使用AJAX提交表单 第4次点击:刷新页面,不再做任何事情

关于我在这里做错了什么的想法?我已经确保JS出现在所有场合,检查所有内容,并用Google搜索我的数字 - 我只是看不出我在哪里犯了错误?

1 个答案:

答案 0 :(得分:0)

辉煌。

非常感谢yuriy636提供答案,并感谢putvande帮我收拾二次电话。

现在一切都很完美,

$(document).on('submit', '.itempost', function(e) {

e.preventDefault();
$.ajax({
    type: "POST",
    url : 'item.php',
    data: $(this).serialize(),
    success : function (response) {
    $("#update").load("update.php?&t={$parentid}"); 

    },
    error: function (jXHR, textStatus, errorThrown) {
    alert('not ok');
        alert(errorThrown);
    }
});
return false;
});