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 matlab中使用gurobi时报错
  • ¥15 WPF 大屏看板表格背景图片设置
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是，这到底错哪儿了😭
  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂