使用AJAX发布html表单字段

时间:2014-01-21 10:47:27

标签: javascript php jquery html ajax

我需要使用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编码为我做了一些其他的工作。我可以使用此代码模式进行表单提交吗?

1 个答案:

答案 0 :(得分:-1)

这个jQuery代码现在正在做我的工作。不过,我没有在早期的Internet Explorers中尝试过。它适用于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();
                    });
                });