jQuery从PHP更新内容_Php_Jquery

jQuery从PHP更新内容

php jquery

jQuery从PHP更新内容,php,jquery,Php,Jquery,我有一个有很多行的表，每行有2个输入字段和1个提交按钮。当我单击submit按钮时，数据被传递到PHP脚本，PHP脚本处理数据并返回一些文本当前，提交按钮被PHP脚本返回的文本替换。但是我希望返回的文本显示在按钮旁边，这样按钮就不会消失我不能解决这个问题，也许有人能帮我解决这个问题 <html> <head> <title>Add data with Ajax</title> <sc

我有一个有很多行的表，每行有2个输入字段和1个提交按钮。当我单击submit按钮时，数据被传递到PHP脚本，PHP脚本处理数据并返回一些文本

当前，提交按钮被PHP脚本返回的文本替换。但是我希望返回的文本显示在按钮旁边，这样按钮就不会消失

我不能解决这个问题，也许有人能帮我解决这个问题

<html>
    <head>
            <title>Add data with Ajax</title>
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
            <script type="text/javascript">
                    $(document).on('click', '#submitButton input[type=button]', function(){
                            var field1 = $(this).parent().parent().find(".field1").val();
                            var field2 = $(this).parent().parent().find(".field2").val();
                            var field3 = $(this).parent().parent().find(".field3").val();

                            var submitButton = $(this);

                            $.ajax({
                                    type: "POST",
                                    url: "add_data.php",
                                    data: { field1: field1, field2: field2, field3: field3 }
                            })
                            .done(function(msg) {
                                    submitButton.parent().html(msg);
                            });
                    });
            </script>
    </head>
    <body>
            <form method="POST">
                    <input type="hidden" class="field1" value="product 1">
                    <input type="text" class="field2" value="data1">
                    <input type="text" class="field3" value="data2">
                    <div id="submitButton">
                            <input type="button" name="submitButton" value="Add">
                    </div>
            </form>
            <form method="POST">
                    <input type="hidden" class="field1" value="product 2">
                    <input type="text" class="field2" value="data1">
                    <input type="text" class="field3" value="data2">
                    <div id="submitButton">
                            <input type="button" name="submitButton" value="Add">
                    </div>
            </form>
            <form method="POST">
                    <input type="hidden" class="field1" value="product 3">
                    <input type="text" class="field2" value="data1">
                    <input type="text" class="field3" value="data2">
                    <div id="submitButton">
                            <input type="button" name="submitButton" value="Add">
                    </div>
            </form>
    </body>


使用Ajax添加数据
$（文档）。在（'单击'，'提交按钮输入[type=button]”上，函数（）{
var field1=$（this.parent（）.parent（）.find（“.field1”）.val（）；
var field2=$（this.parent（）.parent（）.find（“.field2”）.val（）；
var field3=$（this.parent（）.parent（）.find（“.field3”）.val（）；
var submitButton=$（此项）；
$.ajax({
类型：“POST”，
url:“add_data.php”，
数据：{field1:field1，field2:field2，field3:field3}
})
.done（函数（msg）{
submitButton.parent（）.html（msg）；
});
});

好吧，不要替换内容：

submitButton.parent().html(msg);

submitButton.parent().append(msg);

附加到内容：

submitButton.parent().html(msg);

submitButton.parent().append(msg);

您有多个

id=“submitButton”

，这是错误的

id

s将是唯一的，稍后您将遇到问题，因为javascript/jQuery无法告诉您要指定哪个

id=“submitButton”

。将它们更改为

class

s或unique

id

sThanks，这部分是有效的。但文本也应该淡出。如果我这样做：submitButton.parent（）.append（msg.fadeOut（1000）；文本会淡出，但提交按钮也会淡出。在HTML中，在输入标记后立即添加

，那么jQuery表达式将是

submitButton.next（“span”）.HTML（msg）.fadeOut（1000）