javascript - 在 Colorbox 中通过 Ajax 调用将表单数据保存到数据库

Question

我已经在 Colorbox 中放置了一个表单，并希望将表单内容保存在数据库中。但是当我点击提交按钮时，颜色框关闭并且操作未完成。

需要一些指导。谢谢

$("img").colorbox({opacity:0.3,top:100,width:"800px",height:"500px", href:"editquote.php?id="+eid+""});

------------editquote.php -->

<form method="POST" id="editform" action=""><table>
<tr><td><textarea name="quote" style="width:390px;" value="<?php echo $edit_quoteid;?>"><?php echo $quote;?></textarea></td></tr>
<input type="submit" value="Save" name="Save">
</table>     </form>
<?php
$edit_quoteid=$_GET['id'];
if(isset($_POST['Save'])){       
$qcontent=$_POST['quote'];
$up_query="UPDATE daily_quotes SET quote='".$qcontent."',WHERE id=".$edit_quoteid;
$edit_quote=mysql_query($up_query) or die();
?>    

----->Ajax调用写在editquote.php页面上

<script>
    $(document).ready(function(){
        $("#submit_editquote").off("click").on("click",function(){
            var data = $("form#editform").find("input").serialize();
                $.ajax({
                    url:'./index.php',
                    data:data,
                });
        });
    });
</script>

另外我将“提交”按钮更改为“按钮”并且 submit_editquote 是给定的 id

Answer 1

首先，你需要响应一些东西来检查ajax请求响应；

PHP:

<?php
    $edit_quoteid = $_GET['id'];
    if(isset($_POST['Save'])){  
        $edit_quoteid = $_POST['id'];
        $qcontent = $_POST['quote'];
        $up_query = "UPDATE daily_quotes SET quote='" . $qcontent . "',WHERE id=" . $edit_quoteid;
        $edit_quote=mysql_query($up_query);
        echo $edit_quote; // This will be false on qquery failure else true
    }
?>

HTML:为发送id放置隐藏元素

<form method="POST" id="editform" action="">
    <table>
        <tr>
            <td><textarea name="quote" style="width:390px;" value="<?php echo $edit_quoteid;?>"><?php echo $quote;?></textarea></td>
        </tr>
        <input type="hidden" value="<?php echo $_GET['id']" name="edit_quoteid">
        <input type="button" value="Save" name="Save" id="submit_editquote">
    </table>
</form>

JS:检查响应并决定是否关闭 fancybox

<script>
    $(document).ready(function(){
        $("#submit_editquote").on("click",function(){
            var data = $("form#editform").serialize();
                $.ajax({
                    url:'./index.php',
                    data:data,
                    success: function(response) {
                        if (response) {
                            alert("Success");
                            //Close fancybox here
                        } else {
                            alert("Update operation failed");
                        }
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        alert(xhr.status);
                        alert(thrownError);
                    }
                });
        });
    });
</script>