使用php ajax在同一页面上多次提交

Question

<div id="home">
<div class="container">
    <form action="" method="post">      
        <b><font color = "000099"><select name="category" id="category">
        <option>Name </option>
        <option>Email</option>
        <option>Employee</option>
        <option>Customer</option>
        </select></font></b>
        <b><font color = "000099"><select name="read" id="read">
        <option>New</option>
        <option>Archive</option>                                    
        </select></b>
        <font color = "339933"><b><input name="value" type="text" placeholder="Value" /> </b>                                   
        <input type="submit" value="GO"/></font><br>
    </form>
<font color = "339933"><b>
</b></font>
<p><div id="body">
<table width="98%" border="1">
<tr></tr>
<tr>
    <td><font color = "339933"><b>Name</td>
    <td><font color = "339933"><b>E-Mail </td>
    <td><font color = "339933"><b>Access</td>
    <td><font color = "339933"><b>Update </td>
</tr>
<?php
$read = $_POST['read'];

If($read == 'New'){
    $read = '0';
}

If($read == 'Archive'){
    $read = '1';
    $arc = 'AND date < CURDATE() - INTERVAL 90 DAY';
}

$category = $_POST['category'];
$value = $_POST['value'];
if($category == 'Name'){
    $where = " where name like '%$value%' ";
}else if($category == 'E-mail'){
    $where = " where Email like '%$value%' ";
}else if($category == 'Employee'){
    $where = " where Email like '%$value%' ";
}else if($category == 'Customer'){
    $where = " where Email not like '%$value%' ";
}

$select = 'SELECT *';
$from = ' FROM users';
if($where == ''){
    $where = ' WHERE TRUE ';
}

$order = " order by id desc limit 100";

if($read == '0'){
    $sql = $select . $from . $where . $order ;
}else{
    $sql = $select . $from . $where . $arc . $order ;
}

$result_set=mysql_query($sql);
    while($row=mysql_fetch_array($result_set)) {
?>
<tr>
    <form  method="post" name="forms" action=""> 
        <td><font color = Black><?php echo $row['name']; ?></td>
        <td><div id= "remail" name="remail"><font color = Black><?php echo $row['Email']; ?></div></td> 
        <td><input type="text" name="access_rights" class="form-control" value="<?php echo $row['access']; ?>" required="required" ></td>
        <td><input type="submit" class="submit_button" id="submit_button" name="submit_button" value="Update"/></td>
    </form>
<?php } ?>
</table>
</div>
</body>

<script type="text/javascript">
    $(function() {
        $(".submit_button").click(function() {
        alert('asfsfsds');
        var ID = $(this).attr("id");
        var dataString1 = 'msg_id='+ ID;
        var mail =  $("#remail").val();
        var mailid = 'remail='+ mail;
        var textcontent = $("#access_rights").val();
        var dataString = 'access_rights='+ textcontent;
        if(textcontent==''){
            alert("Enter some Value..");
            $("#access_rights").focus();
        } else {
        $.ajax({
            type: "POST",
            url: "action.php",
            data: dataString,mailid,dataString1,
            cache: true,
            success: function(html){
                document.getElementById('access_rights').value='';
                $("#access_rights").focus();
            }  
        });
        }
    return false;
    });
});
</script>
</html>

以上是我的 php ajax 代码。我想通过 ajax 在 mysql 数据库中输入一个字段。

页面上有多个提交按钮。让我好好解释一下。

以下代码用于对页面上的值进行排序。此值从数据库中检索。这工作正常。我可以从数据库中获取数据，它显示在同一页面中。

<form action="" method="post">      
<b><font color = "000099">
    <select name="category" id="category">
        <option>Name </option>
        <option>Email</option>
        <option>Employee</option>
        <option>Customer</option>
    </select>
</font></b>
<b><font color = "000099">
        <select name="read" id="read">
        <option>New</option>
        <option>Archive</option>                                    
    </select>
</b>
<font color = "339933"><b><input name="value" type="text" placeholder="Value" /></b>                                    
<input type="submit" value="GO"/></font><br>
</form>

在下面的代码中，数据来自数据库，一个文本框和提交按钮将显示在表格中。

<form method="post" name="forms" action=""> 
    <tr>
        <td><font color = Black><?php echo $row['name']; ?></td>
        <td><div id= "remail" name="remail"><font color = Black><?php echo $row['Email']; ?></div></td> 
        <td><input type="text" name="access_rights" class="form-control" value="<?php echo $row['access'];?>" required="required" ></td>
        <td><input type="submit" class="submit_button" id="submit_button" name="submit_button" value="Update"/></td>
    </tr>
</form>

我希望有特殊权限的用户可以通过ajax更新值，因为可能有多行，每次刷新页面都不好。

点击更新按钮后，ajax 事件未触发。

任何人都可以在这方面给我建议。我不擅长ajax。

Answer 1

可能还有其他问题，但以下行在语法上不正确：

data: dataString,mailid,dataString1,

这不是在 Javascript 中连接字符串的方式。另外，您需要用 & 号分隔 name=value 对。

您可以使用一个对象并让 JQuery 进行连接，而不是连接一个字符串：

data: {
    'access_rights': $("#access_rights").val(),
    'remail': $("#remail").val(),
    'msg_id': $(this).attr("id")
},

---

更新：

您没有带有id="access_rights 的元素。您确实有一个带有id="remail" 的元素，但是您在循环中创建了该元素，因此您将拥有多个带有该id 的元素。

您需要获取与单击的提交按钮在同一行的元素的值。你不能使用id 值来做到这一点。相反，您在按钮元素上使用.closest('tr') 来获取周围的行。然后，您可以在行元素上使用.find() 来获取该行中的值。

变化：

<td><div id= "remail" name="remail"><font color = Black><?php echo $row['Email']; ?></div></td> 

收件人：

<td><font color="Black" class="remail"><?php echo $row['Email']; ?></td> 

那么你可以：

$(".submit_button").click(function() {
    var $submitBtn = $(this),
        $row = $(this).closest('tr'),
        $accessRights = $row.find("input[name=access_rights]"),
        accessRights = $accessRights.val();
    if (accessRights == ''){
        alert("Enter some Value..");
        $accessRights.focus();
    } else {
        $.ajax({
            type: "POST",
            url: "action.php",
            data: {
                'access_rights': accessRights,
                'remail': $row.find(".remail").text(),
                'msg_id': $submitBtn.attr("id")
            },
            cache: true,
            success: function(html){
                $accessRights.val('').focus();
            }  
        });
    }
    return false;
});

---

您还缺少结束 </tr> 标记。