使用 AJAX 发布 html 表单字段

Question

我需要使用AJAX 编辑数据库中的一些文本。

默认情况下，我有一个 HTML 表单输入字段，所有输入字段都包含数据库中已有的数据。因此，如果用户想要编辑这些数据，他必须在相同的输入框中输入新数据。在他点击编辑链接表单数据后，必须将其发布到另一个页面。之后我可以处理所有过程。唯一我不知道如何通过 AJAX 发布表单

<form id="test_form" name="test_form">
                <div style="width: 300px; height: auto; float: left; margin-top: 15px;">
                    <input name="sub_cat_two_name" id="sub_cat_two_name" value="<?php echo $row['sub_cat_two_name'] ?>"/>
                </div>
                <div style="width: 300px; height: auto; float: left; margin-top: 15px;">
                    <input name="cat_name" id="cat_name" value="<?php echo $row['cat_name'] ?>" />
                </div>
                <div style="width: 300px; height: auto; float: left; margin-top: 15px;">
                    <span>
                        <a onclick="send_edit_sub_cat()" href="<?php echo 'edit_sub_cat/' . $row['sub_cat_two_id'] ?>">Edit</a> /
                        <a href="<?php echo 'delete_sub_cat/' . $row['sub_cat_two_id'] ?>">Delete</a>
                    </span>
                </div>
            </form>



var xmlhttp;
                function loadXMLDoc(url, cfunc)
                {
                    if (window.XMLHttpRequest)
                    {// code for IE7+, Firefox, Chrome, Opera, Safari
                        xmlhttp = new XMLHttpRequest();
                    }
                    else
                    {// code for IE6, IE5
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    xmlhttp.onreadystatechange = cfunc;
                    xmlhttp.open("POST", url, true);
                    xmlhttp.send();
                }

 function any_function_for_post_my_form_data(str)
                {

                    loadXMLDoc("http://localhost/ajax_showbrdep_admin/" + str, function()
                    {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                        {
                            document.getElementById("myDivAdmn").innerHTML = xmlhttp.responseText;
                        }
                    });
                } 

我使用上面的 ajax 编码为我做一些其他的工作。我可以使用此 Code Pattern 进行表单提交吗？

Answer 1

这个 jQuery 代码现在可以很好地完成我的工作。不过，我没有在早期的 Internet Explorer 中尝试过。它适用于 Firefox、IE10 和 Chrome。

$(document).ready(function() {
                    var frm = $('#test_form');
                    $("input").change(function(event) {
                        // frm.submit(function(event) {
                        $.ajax({
                            cache: false,
                            type: frm.attr('method'),
                            url: frm.attr('action'),
                            data: $("#test_form").serialize(),
                            complete: function(r) {
                                //alert(r.responseText);
                                $("#myDivAdmn").html(r.responseText);
                            }
                        });
                        event.preventDefault();
                    });
                });