doubo4336 2014-03-28 15:27
浏览 36
已采纳

HTML5 Ajax JQuery PHP MySQL插入

Can anyone tell me, why I am still redirected to insertInput.php after pushing the submit button. I tried several things, but it didn't work, like changing the type from "submit" to "button" and so on.

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);

?>

Thank you guys. Any help as always very appreciated.

  • 写回答

3条回答 默认 最新

  • duanemei2194 2014-03-28 16:05
    关注

    The problem is you are assigning two events for submitting one form. In HTML, there is an action. And in Javascript,there is an onClick. One way to avoid this, you can disable the action like this:

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

    In PHP code, you are getting the script name of the $("#form").attr('action') in the following part:

    Before:

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

    Now there isn't a valid value in the action, this need to be altered, for example:

    After:

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

    Hope this helps.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记