如何使用jQueryAjax编辑文本？

如何使用表单提交和ajax编辑文本名称和性别？？ 当我点击第一个提交按钮时，它只会改变名字和性别 如果单击第二个，只需更改第二个姓名和性别！ 怎么做

HTMl&JS

<!-- Form1 -->
<form action="index.php" class="form_edit" >
    Name: <span class="display">Tom</span><br>
    Sex: <span class="display_sex">Male</span><br>
    <input type="text" name="name" value="" /><br>
    <input type="text" name="sex" value="" /><br>
    <input name="submit" type="submit" value="Submit" /><br><br>
</form>
<!-- Form2 -->
<form action="index.php" class="form_edit" >
    Name: <span class="display">Mary</span><br>
    Sex: <span class="display_sex">Female</span><br>
    <input type="text" name="name" value="" /><br>
    <input type="text" name="sex" value="" /><br>
    <input name="submit" type="submit" value="Submit" /><br><br>
</form>
<!-- Form3 -->
<form action="index.php" class="form_edit" >
    Name: <span class="display">John</span><br>
    Sex: <span class="display_sex">Male</span><br>
    <input type="text" name="name" value="" /><br>
    <input type="text" name="sex" value="" /><br>
    <input name="submit" type="submit" value="Submit" /><br><br>
</form>

<script type="text/javascript">

    $('.form_edit').submit(function(){
        $.ajax({
           type: "POST",
           url: "edit.php",
           data: $(this).serialize(),
           success: function(data)
           {
                $('.display').text(data);

            }
         });
        return false;
    }); 
</script>

姓名：汤姆

性别：男性








姓名：玛丽

性别：女性








姓名：约翰

性别：男性








$（'.form_edit'）。提交（函数（）{
$.ajax({
类型：“POST”，
url:“edit.php”，
数据：$（this）.serialize（），
成功：功能（数据）
{
$（'.display'）.text（数据）；
}
});
返回false；
}); 

PHP

---

您必须为成功处理程序中的jQuery选择器提供适当的上下文。这样，它会影响类

display

中的所有元素

$('.form_edit').submit(function(){
    var form = this; // <<< added
    $.ajax({
       type: "POST",
       url: "edit.php",
       data: $(this).serialize(),
       success: function(data)
       {
            form.find('.display').text(data); // <<< modified

        }
     });
    return false;
}); 

$（'.form_edit'）。提交（函数（）{
var form=this；//能否尝试以下代码

$('.form_edit').submit(function(e) {

    e.preventDefault();

    $.ajax({
       type: "POST",
       url: "edit.php",
       data: $(this).serialize(),
       success: function(data)
       {
            $('.display').text(data);

        }
     });
}); 

你的问题很不清楚。每个表单只有一个提交按钮，但你说的是关于第二个按钮。这里你只有名字，你说的是名字和第二个名字。你想影响发送ajax的表单吗，你正在影响这三个吗？只需通过输入编辑姓名和性别，例如姓名：Tom，当我键入Peter和名字将从Tom更改为Peter，而不是更改Mary和其他人。我以前尝试过，但没有任何更改！这应该只针对提交表单中的.display元素。将
return false
更改为
e.preventDefault（）
不会修复任何问题，因为
return false
会阻止默认操作。
$('.form_edit').submit(function(e) {

    e.preventDefault();

    $.ajax({
       type: "POST",
       url: "edit.php",
       data: $(this).serialize(),
       success: function(data)
       {
            $('.display').text(data);

        }
     });
});