dtjo87679 2015-05-23 19:44
浏览 63
已采纳

使用ajax和php将数据插入MySQL

I feel like I'm probably about 90% of the way there, and just need some help with that last 10%. I've looked at a number of different examples, and tried to piece together a solution, but haven't figured it out, so I'm looking for some guidance.

I have a small html page, with a little javascript, and a short .php that is adding the received data to a database.

I can see that the code is getting into the ajax function, and then into the insert function. But it's not actually doing the insert. I suspect that it's never sending the data off to the php file, but I don't know that for sure.

Here's the html code:

    <html>
    <head>
        <script type ="text/javascript" language="javascript">
            function ajaxFunction(){
                var ajaxRequest;
                    alert("enter ajax"); //just a testing line
                try{
                    ajaxRequest = new XMLHttpRequest();
                } catch (e) {
                    try {
                        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        try {
                            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (e) {
                            alert("Your browser broke!");
                            return false;
                        }
                    }
                }

            ajaxRequest.onreadystatechange = function(){
                if(ajaxRequest.readyState == 4){
                    var ajaxDisplay = document.getElementById('responseDiv');
                    ajaxDisplay.innerHTML = ajaxRequest.responseText;
                        }
                }

                alert("enter insert");  //just for testing
                var type = $('#type').val();
                var vintner = $('#vintner').val();

                var myData = {"type": type, "vintner": vintner,};

                $.ajax({
                    url: "bottleAdd.php",
                    type: "POST",
                    data: "myData",
                    success: function(data, status, xhr)
                    {
                        $("$bottleAdd").html(data);
                        $("type").val();
                        $("vintner").val();
                        }
                });
            }

        </script>

        <title>Simple Add</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <div id="addBottle">
            <table>
                <tr>
                    <td>Type: <input type="text" id="type" /></td>
                    <td>Vintner: <input type="text" id="vintner" /></td>
                </tr>
                <tr>
                    <td><button onClick="ajaxFunction()">Save Bottle Now</button></td>
                </tr>
            </table>
        </div>
        <div id="responseDiv">Response will appear here</div>
    </body>
</html>

And here's the php

<?php
require_once 'login.php';
$conn = mysqli_connect($db_hostname, $db_username, $db_password, $db_database) or die("Connection failed: " . mysqli_connect_error());

$wineType = $_POST['type'];
$vintner = $_POST['vintner'];

$sql = "INSERT INTO bottleSimple (winetype, vintner)"
        . " values ('$wineType', '$vintner')";

if (mysqli_query($conn, $sql)) {
    echo "Successfully Inserted";
} else {
    echo "Insertion Failed<br />";
    echo $sql;
}
?>

I know there are some things to do in the php (prevent sql injection for example). But right now, I'm less concerned about that, and more about just figuring out how to get this to run correctly.

Any help would be appreciated.

Thank you.

  • 写回答

3条回答 默认 最新

  • dougai0138 2015-05-23 19:58
    关注

    You mixed plain JS AJAX with jQuery's ajax wrapper.

    Change your code to the following:

    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Simple Add</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type ="text/javascript" language="javascript">
            var type = $('#type').val();
            var vintner = $('#vintner').val();
            var myData = {"type": type, "vintner": vintner};
            $.ajax({
                url: "bottleAdd.php",
                type: "POST",
                data: myData,
                success: function(data) {
                    $("#responseDiv").html(data);
                }  
            });
        </script>
    </head>
    

    The rest is without a change.

    That way you will use jQuery AJAX.

    By the way, it is a good practice to place meta tags a the beginning of your head tag, because tag like the charset will cause the browser to start reading your page again from the beginning.

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

报告相同问题?

悬赏问题

  • ¥50 随机森林与房贷信用风险模型
  • ¥50 buildozer打包kivy app失败
  • ¥30 在vs2022里运行python代码
  • ¥15 不同尺寸货物如何寻找合适的包装箱型谱
  • ¥15 求解 yolo算法问题
  • ¥15 虚拟机打包apk出现错误
  • ¥15 用visual studi code完成html页面
  • ¥15 聚类分析或者python进行数据分析
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js,页面2返回页面1时定位进入的设备