Question

我面临着Ajax的奇怪问题我已经尝试检查所有代码但是ajax仍然使用GET方法而不是POST。如果我错了，请纠正这是我的代码

$(document).ready(function(){
    $("#err<?php echo $id; ?>").css('display', 'none', 'important');
     $("#submit-edit<?php echo $id; ?>").click(function(){  
        $.ajax({
            type: "POST",
            url: "includes/edit_user.php",
            data: "submit-edit="+$("#submit-edit<?php echo $id; ?>").val()+"&user_id="+$("#user_id").val()+"&username="+$("#username").val()+"&password="+$("#password").val()+"&firstname="+$("#firstname").val()+"&lastname="+$("#lastname").val(),
            success: function(html){    
                if($.trim(html)=='true')    {
                 $("#err<?php echo $id; ?>").addClass("alert alert-success err-inline");
                 $("#err<?php echo $id; ?>").html("<strong>User Details are Updated Successfully</strong>");
                 window.location="<?php basename($_SERVER['PHP_SELF']); ?>";
                }
                else    {
                    $("#err<?php echo $id; ?>").addClass("alert alert-danger err-inline");
                    $("#err<?php echo $id; ?>").html("<img src='images/caution-icon.png' /> <strong>Please check the details you have entered</strong>");
                }
           },
           beforeSend:function()
           {
                $("#err<?php echo $id; ?>").css('display', '-webkit-inline-box', 'important');
                $("#err<?php echo $id; ?>").addClass("err-inline");
                $("#err<?php echo $id; ?>").html("<img src='images/loading.gif' /> Loading...")
           }
        });
        return false;
    });
});

这里的PHP代码是一个bootstrap模式，我用过echo $ id;所以我可以创建模型来编辑主页面中的每个用户（我称之为模态的页面）。

<div id="edit<?php echo $id; ?>" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 class="modal-title">Edit User</h4>
            </div>
            <div class="modal-body">
            <div class="row">
                    <div class="col-md-3"></div>
                    <div class="col-md-8">
                        <div id="err<?php echo $id; ?>" class="alert" role="alert"></div>
                    </div>
                    <div class="col-md-1"></div>
                </div>
                <form id="editUser<?php echo $id; ?>" method="POST" class="form-horizontal" >
                    <div class="form-group">
                        <label class="col-md-3 control-label">Username</label>
                        <div class="col-md-5">
                            <input id="user_id" type="hidden"  name="id" value="<?php echo $row['user_id']; ?>" required>
                            <input id="username" type="text" class="form-control" name="username" value="<?php echo $row['username']; ?>" readonly="readonly"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Password</label>
                        <div class="col-md-5">
                            <input id="password" type="password" class="form-control" name="password" value="<?php echo $row['password']; ?>" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">First Name</label>
                        <div class="col-md-5">
                            <input id="firstname" type="text" class="form-control" name="firstname" value="<?php echo $row['firstname']; ?>" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Last Name</label>
                        <div class="col-md-5">
                            <input id="lastname" type="text" class="form-control" name="lastname" value="<?php echo $row['lastname']; ?>" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-5 col-md-offset-3">
                            <button id="submit-edit<?php echo $id; ?>" type="submit" name="submit-edit<?php echo $id; ?>"  class="btn btn-success"><i class="icon-save icon-large"></i>&nbsp;Update</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

还应将数据发布到的php文件包含/ edit_user.php

<?php
include_once('../../config.php');
if (isset($_POST['submit-edit'])){

    $user_id=$_POST['user_id'];
    $username=$_POST['username'];
    $password=$_POST['password'];
    $firstname=$_POST['firstname'];
    $lastname=$_POST['lastname'];

    $result=mysql_query("update users set password='$password' , firstname = '$firstname' , lastname = '$lastname'  where user_id=$user_id")or die(mysql_error());
    if($result)
        echo 'true';
    else
        echo 'false';
    }
?>

Answer 1

在AJAX使用POST方法之前，您必须阻止提交的默认操作：

$("#submit-edit<?php echo $id; ?>").click(function(event){  
    event.preventDefault();

此外，you need to prevent SQL Injection。请stop using mysql_* functions。它们不再被维护，而是officially deprecated。请改为了解prepared statements，并使用PDO。

此外，正如您对OP的评论所述，代码非常复杂。让PHP生成您的HTML并然后单独应用jQuery。当问题到达时，它会让事情更清晰，更容易出问题。

Answer 2

最后经过几个小时的调试后，我找到了解决方案我在表单后放置了Ajax和jQuery代码。还纠正了我的Ajax中的一些问题，如

data: "submit-edit="+$("#submit-edit<?php echo $id; ?>").val()+"&user_id="+$("#user_id<?php echo $id; ?>").val()+"&username="+$("#username<?php echo $id; ?>").val()+"&password="+$("#password<?php echo $id; ?>").val()+"&firstname="+$("#firstname<?php echo $id; ?>").val()+"&lastname="+$("#lastname<?php echo $id; ?>").val(),

并以我必须使用的形式

<input id="username<?php echo $id; ?>" type="text" class="form-control" name="username" value="<?php echo $row['username']; ?>" />

与其他属性类似。我终于意识到，对于每个表单属性，但必须是唯一的，以使其适用于Ajax。如果您更改表单ID并不重要。但是对于所有形式，每个属性都必须以不同方式识别

例如：

<form id="form1">
      <input id="username1" type="text" value="" />
</form>
<form id="form2">
      <input id="username2" type="text" value="" />
</form>

因此，如果我在页面中使用多个表单，则在使用ajax时必须使用具有不同id的每个元素。否则它不会工作。

Ajax没有使用POST方法，而是使用GET jQuery

2 个答案: