HTML5 Ajax JQuery PHP MySQL Insert

本文关键字：MySQL Insert PHP JQuery Ajax HTML5 更新时间：2023-09-26

谁能告诉我，为什么我仍然重定向到insertInput.php后，按提交按钮。我试了很多方法，但是都没有用，比如把"submit"改成"button"等等。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Barocker's Song Voting</title>
        <link href="vote.css" type="text/css" rel="stylesheet">
        <script src="jquery-1.11.0.min.js" type="text/javascript"></script>
         <script type="text/javascript">
            $(document).ready(function(){
                $("#insert").click(function(){
                    var url = "insertInput.php";
                    var data = $("#form :input").serializeArray();
                    alert("Button clicked");
                    $.post(
                        url,
                        data,
                        function(info){
                            $("#result").html(info);
                        }
                    );
                    clearInput();
                });
                function clearInput(){
                    $("#form :input").each(function(){
                        $(this).val("");
                    });
                }
            });
        </script>
    </head>
    <body>
        <div id="insertBanner">
            <form id="form" action="javascript:void(0);" method="post">
                <input type="text" id="title" name="title" style="width: 300px;" placeholder="Titel" autofocus required>
                <input type="url" id="url" name="url" style="width: 300px;" placeholder="Link (Youtube, etc.)">
                <button id="insert">Hinzufügen</button>
            </form>
            <span id="result"></span>
        </div>
    </body>
</html>

PHP:

    /*
     * Connect to MySQL
     */
    $con = mysqli_connect("localhost", "@", "", "test");
    /*
     * Check Connection
     */
    if (mysqli_connect_errno()){
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }
    $title = $_POST['title'];
    $url = $_POST['url'];
    $sql = "INSERT INTO barocker (title, url) VALUES ('" . $title . "', '" . $url . "')";
    if (!mysqli_query($con,$sql)){
        echo "Error";
    } else {
        echo "Success";
    }
    /*
     *  Close Connection
     */
    mysqli_close($con);
?>

谢谢大家。任何帮助都是非常感谢的。

你需要#insert点击禁用

$("#insert").click(function(){
    return false;
});

问题是您正在为提交一个表单分配两个事件。在HTML中，有一个action。在Javascript中，有一个onClick。避免这种情况的一种方法是，像这样禁用action:

<form id="form" action="javascript:void(0);" method="post">

在PHP代码中，您将在以下部分获得$("#form").attr('action')的脚本名称:

:

$("#submit").click(function(){
    $.post(
       $("#form").attr('action'),
       data,function(info){
       $("#result").html(info);
   });
   clearInput();
});

现在在action中没有一个有效值，这需要改变，例如:

:

$("#insert").click(function(){
    var url = "insertInput.php";
    $.post(
           url,
           data,function(info){
           $("#result").html(info);
    });
    clearInput();
});

试试这个:

$("#submit").click(function(e){
            e.preventDefault();
            var data = $("#form :input").serializeArray();
            $.post(
                $("#form").attr('action'),
                data,
                function(info){
                    $("#result").html(info);
                }
            );
            clearInput();
        });

e.preventDefault();此指令阻止默认操作