Ajax 不使用 POST 方法，而是使用 GET jQuery答案

【问题标题】：Ajax not using POST method instead it is using GET jQueryAjax 不使用 POST 方法，而是使用 GET jQuery
【发布时间】：2015-04-02 21:10:56
【问题描述】：

我在使用 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 代码是一个引导模式，我使用了 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>

还有应该在includes/edit_user.php中发布数据的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';
    }
?>

【问题讨论】：

丑陋的。你应该尽量把 PHP 和 JS 分开。
应该没什么区别，但假设 jQuery 1.9.0 或更高版本，您可以尝试使用method: "POST" 而不是type: "POST"。
如果仍然无法正常工作，则查看服务器是否通过非常简单的 ajax 调用测试页面接收到 any 帖子变量。

标签： php jquery ajax twitter-bootstrap

【解决方案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 中的 cmets 所述，代码非常复杂。让 PHP 生成您的 HTML，然后然后分别应用 jQuery。当问题出现时，它会让事情变得更干净，更容易排除故障。

【讨论】：

嗯，我是 php 的基本学习者，这只是我需要尽快完成的小项目，我已将更正为 $("#submit-edit").click(function(event){ event.preventDefault(); $.ajax({ type: "POST", url: "includes/edit_user.php", 但这没有用。它仍然显示get方法在 chrome 调试器中。请帮助不知道如何实现它

【解决方案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 的每个元素。否则将无法正常工作。

【讨论】：