Question

我正在做一个简单的ajax更新记录。

这是我的代码

的index.php：

  <script type="text/javascript">
    $("#submit_button").click( function() {
        $.post( $("#updateprofile").attr("action"), 
            $("#updateprofile :input").serializeArray(), 
                function(info){ $("#result").html(info); 
            });
            clearInput();
        });

        $("#updateprofile").submit( function() {
            return false;   
        });

        function clearInput() {
            $("#updateprofile :input").each( function() {
                $(this).val('');
            });
    }  
</script>
                <form class="form" id="updateprofile" action="edit-profile.php" method="POST"> 
                <!-- form-horizontal -->
            <div class="control-group">
              <label class="control-label" for="inputName">Name</label>
              <div class="controls">
              <input type="text" class="input-block-level" name="fname" 
                        value="<?php echo $fname; ?>">
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="inputPassword">Password</label>
              <div class="controls">
              <input type="text" class="input-block-level" 
                        value="<?php echo $password; ?>" name="password" >
              <input type="hidden" name="id"
                        value="<?php echo $user; ?>" >
              </div>
            </div>

            <div class="control-group">
              <div class="controls">
              <button class="btn btn-custom" type="submit" id="submit_button">Update</button>
              <button class="btn btn-custom" type="reset" >Cancel</button>
              </div>
            </div>

            </form>
            <span id="result"></span>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">

修改-profile.php：

<?php
include('../../db.php');

if( isset($_POST['id']) || isset($_POST['fname']) || isset($_POST['password'])  ){
      $id = $_POST['id'];
      $fname = $_POST['fname'];
      $password = $_POST['password'];

      $update = $conn->prepare("UPDATE tblusers 
            SET fname = :fname,
            password = :password
            WHERE user_id = :id");
      $update->execute(array(':fname' => $fname, 
                        ':password' => $password,
                        ':id' => $id));
        echo 'Successfully updated record!';
} else {
        echo 'Required field/s is missing';
}

?>

但是我没有在没有刷新页面或转到其他页面的情况下获得更新。有任何想法吗？非常感谢帮助。感谢。

Answer 1

试试这个，你错过了添加ready处理程序并添加了e.preventDefault();当你触发提交按钮时，它会使用默认的表单操作页面

    $(function(){
               console.log("Jquery Loaded!!"); // alert("jquery loaded!"); 
        $("#submit_button").click( function(e) {
            e.preventDefault();
            $.post( $("#updateprofile").attr("action"), 
                $("#updateprofile :input").serializeArray(), 
                    function(info){ $("#result").html(info); 
                });
                clearInput();
            }); 

    });

使用jquery库的Lateset版本。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Answer 2

将您的功能绑定在$(document).ready()功能

中

Answer 3

您的表单正在提交，因为$("#submit_button")类型为submit，这意味着当您的ajax执行时（执行正常）但您的表单也已提交。

要停止提交表单，您可以添加

<form onSubmit="return false;">

到你的HTML。或者您也可以使用：

<form onSubmit="return func();">

如果func（）返回false，则不会提交表单。

Answer 4

首先添加脚本文件，以便在启动时包含jQuery，并按如下所述放置函数

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#submit_button").click( function() {
        $.post( $("#updateprofile").attr("action"), $("#updateprofile :input").serializeArray(),function(info){ 
            $("#result").html(info); 
        });
        clearInput();
    });

    $("#updateprofile").submit( function() {
        return false;   
    });
});
function clearInput() {
    $("#updateprofile :input").each( function() {
        $(this).val('');
    });
}  
</script>

你排序

PHP MySQL Ajax更新记录

4 个答案: