Question

使用带有选择下拉列表的表单。当用户选择选项时，它将通过Ajax发布到ajax.php。然后该文件返回动态输入字段。 form.php看起来像之前选项：

<form action="form.php" method="post" id="myform">
    <select name="raw_ids_array[]" class="select2" multiple="multiple" id="raw_ids_array"><option></option><option value="1">first</option><option value="2">second</option></select>
    <div id="raws_list_hidden"></div>
<input type="submit" id="submit_me" name="submit_me" value="go">
</form>

选择选项后，form.php看起来像：

<form action="form.php" method="post" id="myform"> <select name="raw_ids_array[]" class="select2" multiple="multiple" id="raw_ids_array"><option></option><option value="1">first</option><option value="2">second</option></select> <div id="raws_list_hidden"><input type="text" name="dynamic_field"></div> <input type="submit" id="submit_me" name="submit_me" value="go"> </form>

我使用此代码进行Ajax发布：

<script> $(function () { function ajax_post_data(parameters) { $.ajax({ method: "POST", url: "ajax.php", cache: false, data: parameters, success: function(data) { $("#raws_list_hidden").html(data); } }); } $('#raw_ids_array').on("change", function(e) { parameters=$("#myform").serialize(); ajax_post_data(parameters); }); }); </script>

但是，如果表单提交失败，我需要再次显示所有先前选择的选项/输入的值。所以补充一下：

$(document).ready(function() { parameters=$("#myform").serialize(); ajax_post_data(parameters); });

提交form.php后（获得＆＃34;重新加载＆＃34;），它会将选定的选项从raw_ids_array[]发布到ajax.php，然后将动态字段添加到{{1}再次div。唯一不起作用的是 - 用户从raws_list_hidden输入的值不是序列化的;因此，它变得空洞。

我应该如何修改代码，因此动态字段中的值也会发布到dynamic_field？

P.S。如果我使用代码，我可以序列化所有字段：

ajax.php

但它没有用，因为数据在发布$('#submit_me').click(function() { parameters=$("#myform").serialize(); ajax_post_data(parameters); });之前序列化，所以我不知道表单是否会失败（如果提交了一些无效值）或不。

Answer 1

如果您理解正确，则会在不注意的情况下两次发布您的表单。

要使其正常工作，您首先需要将表单中的输入类型提交替换为其他类型的元素，例如下面的代码示例，其中我使用 button ：< / p>

编辑：为表单和ajax帖子添加了正确的函数调用。

<form id="myform">
    <select name="raw_ids_array[]" class="select2" multiple="multiple" id="raw_ids_array">
        <option></option>
        <option value="1">first</option>
        <option value="2">second</option>
    </select>
    <div id="raws_list_hidden"></div>

    <button id="submit_me" name="submit_me">go</button>

</form>

这会阻止您的表单自动提交按下按钮时：我们会将按钮的操作限制为我们在JS中编写的内容。

如您所见，表单元素也没有方法或操作属性。

使用ajax的想法正是在提交内容时不必重新加载页面。 Ajax将发布数据并处理curtins背后的结果，因此用户不会被重定向到另一个页面，也不会自动重新加载任何内容。

我相信如果你把你的JS保持为：

function post_data(params, dest) {
    $.ajax({
        method: 'POST',
        url: dest+'.php',
        cache: false,
        data: params,
        success: function(data) {
            $('#raws_list_hidden').html(data);
        },
        error: function(data) {
            console.log('something went wrong - ', data);
        }
    });
}

$('#raw_ids_array').on("change", function(e) {
    parameters = $("#myform").serialize();
    post_data(parameters, 'ajax');
});

$('#submit_me').click(function() {
    parameters=$("#myform").serialize();
    post_data(parameters, 'form');
});

它会起作用。

关于＆＃34;成功＆＃34; ajax请求声明的属性我们将处理肯定响应（http代码200到299）。要处理错误（http代码400到599），您可以在＆＃34;错误＆＃34;上声明一个函数。属性，就像上面的例子一样。

有关JQuery Ajax的更多信息：https://www.w3schools.com/jquery/ajax_ajax.asp 有关http状态代码的详细信息：https://en.wikipedia.org/wiki/List_of_HTTP_status_codes

我希望这有帮助！：）

编辑：为表单和ajax帖子添加了正确的函数调用。如果你想单独处理帖子回复，你可以创建两个不同的函数来进行调用，或者编辑代码以便你可以发送一个回调函数：

function postData(params, dest, successCallback, errorCallback) {
    $.ajax({
        method: 'POST',
        url: dest+'.php',
        cache: false,
        data: params,
        success: successCallback,
        error: errorCallback
    });
}

$('#raw_ids_array').on('change', function(e) {
    postData($('#myform').serialize(), 'ajax', ajaxSuccess, ajaxError);

    function ajaxSuccess(response) {
         $('#raws_list_hidden').html(response);
    }

    function ajaxError(response) {
         console.log('something went wrong with ajax post - ', response);
    }
});

$('#submit_me').on('click', function() {
    postData($('#myform').serialize(), 'form', formSuccess, formError);

    function formSuccess(response) {
         console.log('form submit worked successfully - ', response);
    }

    function formError(response) {
         console.log('something went wrong with form post - ', response);
    }
});

表单提交后保留动态表单字段值

1 个答案: