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

时间:2015-09-06 05:08:15

标签: php jquery ajax

<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中并不擅长。

1 个答案:

答案 0 :(得分:1)

可能还有其他问题,但以下行在语法上是不正确的:

data: dataString,mailid,dataString1,

这不是你如何在Javascript中连接字符串。另外,您需要使用&符号分隔名称=值对。

不是连接字符串,而是使用对象让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>代码。