Ajax調用后如何提交表單

Question

我有這樣的形式

<form id="formCategorias" action="./index.php" method="post">
<input type="hidden" value="5" name="pais">
<table>
    <tbody>
        <tr class="row">
            <td>Renta Comerciales</td>
            <td>
                <input type="text" class="validate" value="" id="inputcat_0" name="" style="border: 1px solid rgb(221, 221, 221);">
                <select id="categoria_0" name="categoria_0">
                    <option value="0">Provincias</option>
                    <option value="Oficinas">Oficinas (11)</option>
                    <option value="Ranchos">Ranchos (12)</option>
                    <option value="Naves Industriales">Naves Industriales (15)</option>
                </select>
                <button onclick="seleccionarCategoria(0)" type="button">+</button>
            </td>
        </tr>
        <tr>
            <td align="right" colspan="2">
                <input type="submit" id="categorias" value="Enviar" name="submit">
            </td>
        </tr>
    </tbody>
</table>

我正在使用以下腳本進行處理

$(document).on('submit', '#formCategorias', function (event) {
    $(".validate", this).css("border", "1px solid #ddd");
    event.preventDefault();

    var valid = true;
    $.each($(".validate", this), function () {
        if ($(this).val().length == 0) {
            $(this).css("border", "1px solid red");
            valid = false;
        }
    });
    var formTosubmit = $(this).attr('id');


    var jsonCategoria = JSON.stringify(categoria),
        jsonFeed = JSON.stringify(feed),
        url = "xxxxxxxxxx/feeds/web/ajax.php";
    if (jsonCategoria != '' && jsonFeed != '') {
        var posting = $.post(url, {
            im_core: 'updateCategorias',
            Categorias: jsonCategoria,
            xmlFeeed: jsonFeed,
            idFeed: 11
        }).done(function (data) {
            if (data == 1) {
                valid = true;
            } else alert("Check the form");
        });
    }
    if (valid == true) alert('#' + formTosubmit);
    $('#' + formTosubmit).submit();
});

問題是當我使用Submit（）函數提交表單時，在ajax調用之后，瀏覽器反復執行Ajax call（），導致錯誤，

解決方法可能是commit（）函數應該在action標簽中提供的url上提交表單，而不是在給ajax調用提供的url上提交表單，

有人可以建議我嗎

提前致謝

Answer 1

這里有兩個問題

1. 由於您正在調用jQuery Submit事件，因此它將再次觸發Submit處理程序，從而創建無限遞歸調用。 為了解決這個問題，表單元素（dom對象）的submit方法
2. 由於ajax是異步的，請檢查post回調本身中的有效條件

所以

$(document).on('submit', '#formCategorias', function (event) {
    $(".validate", this).css("border", "1px solid #ddd");
    event.preventDefault();

    var valid = true;
    $.each($(".validate", this), function () {
        if ($(this).val().length == 0) {
            $(this).css("border", "1px solid red");
            valid = false;
        }
    });

    var frm = this;
    var formTosubmit = $(this).attr('id');


    var jsonCategoria = JSON.stringify(categoria),
        jsonFeed = JSON.stringify(feed),
        url = "xxxxxxxxxx/feeds/web/ajax.php";
    if (jsonCategoria != '' && jsonFeed != '') {
        var posting = $.post(url, {
            im_core: 'updateCategorias',
            Categorias: jsonCategoria,
            xmlFeeed: jsonFeed,
            idFeed: 11
        }).done(function (data) {
            if (data == 1) {
                valid = true;
                alert('#' + frm.id);
                frm.submit()
            } else {
                alert("Check the form");
            }
        });
    }
});

Answer 2

我的方法如下

1. 寫一個ajax電話

   $request = $ajax ( ... )

   不要在此處編寫.done或success： ajax中的參數

2. 從ajax URL的回調中發送值，該值為true或false

    $request.done(function(resp) { if ( resp.parameter === true ) $('#formID').submit(); }); $request.fail( function () { alert('ajax fails'); }); 

---

備選：在jQuery 1.5中添加$ .ajax中的 dataFilter:參數

演示代碼：

$response = $.ajax( {
    .....
    dataType: 'JSON',
    dataFilter: function(result, type) {
            // console.group('DataFilter');
            // console.log(result);
            // console.log(type);
            // console.groupEnd();
            if (type === 'JSON') {
                var parsed_data = $.parseJSON(result);
                // console.info('Parsed Data');
                // console.log(parsed_data);   
                // code to pre-filtering function to sanitize the response.
                $finalThing = JSON.stringify({ everyThing : true });
                return $finalThing;
            } // end of if
        } // end of DataFilter
}); // end of $.ajax

$response.done (function(resp) {
    // here now `resp` will have $finalThing which comes from dataFilter
    if( resp.everyThing == true ) { $('#formId').submit(); }
});

dataFilter參考

這是預過濾功能，用於清理響應。 您應該返回經過清理的數據。 該函數接受兩個參數：服務器返回的原始數據和'dataType'參數。

Answer 3

在您所說的php中，您是否只是嘗試給我們回聲？

澤維爾