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

报告相同问题?

悬赏问题

  • ¥15 想问一下树莓派接上显示屏后出现如图所示画面,是什么问题导致的
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差(基于双目相机)
  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号