使用ajax和php将表单数据发布到mysql数据库

时间:2015-07-22 07:51:28

标签: javascript php jquery mysql ajax

我的index.php:

<html>
<head>
</head>
<body>

<form name="form1" action="submit.php" method='POST'>
<select id="dropdown1" name="country" onchange="window.getStates()">
<option> Select Country</option>
<option value="1">Pakistan</option>
<option value="2">India</option>
<option value="3">USA</option>
<option value="4">UK</option>
</select>
<input type="text" id="area" style="display: none;" size="16" placeholder=" Enter value"></input>
<input type="submit" id="submit" style="display: none" name="submit" value="submit" onclick="submit()">
</form>
<script type="text/javascript">
function show() {
{ document.getElementById('area').style.display = 'inline-block';
  document.getElementById('submit').style.display = 'inline-block';}
}
function getStates()
{
var xmlhttp;
try{
    xmlhttp = new XMLHttpRequest;
}catch(e)
{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp)
{
    var form = document['form1'];
    var country = form['country'].value;

    xmlhttp.open("GET","http://localhost/getStates.php?country="+country,true);
    xmlhttp.onreadystatechange = function()
    {
        if(this.readyState == 4)
        {
            var s = document.createElement("select");
            s.onchange=show;
            s.id="dropdown2";
            s.name="state";
            s.innerHTML = this.responseText;

            if(form['state'])
            {
                form.replaceChild(s, form['state']);
            }
            else
                form.insertBefore(s,form['submit']);
        }
    }
    xmlhttp.send(null);
}
}

function submit() {
    var table = document.getElementById("dropdown1").value;
    var parameter = document.getElementById("dropdown2").value;
    var value = document.getElementById("area").value;
    $.ajaxSetup({
           url: "http://localhost/database.php",
         type: "POST",
    });
     $.ajax({
        data: 'table='+table+'&parameter='+parameter+'&value='+value+,       
        success: function (msg) {
        alert (msg);},
        error: function (XMLHttpRequest, textStatus, errorThrown)
        {   
        alert('Error submitting request.'); 
        }

        }); 
}
</script>
</body>
</html>

我的getStates.php代码:

<?php

$states=array(
"1" => array("NWFP","Sindh","Bala","Punjab","Select"),
"2" => array("gujrat","goa","U.P.","Select"),
"3" => array("bgjs","hhtrs","Bhtrshts","Utah","Select"),
"4" => array("England","Scotland","Bahwgla","Punthwthjab","Select")
);

if(isset($_GET['country']))
{
$c = $_GET['country'];
if(isset($states[$c]))
{
    for($i = count($states[$c]) -1; $i>=0; $i--)
    {
        echo "<option value='".$states[$c][$i]."'>".$states[$c][$i]."</option>";
    }
}
}

?>

database.php代码:

<?php
header('Content-type: text/html; charset=ISO-8859-1');
try
{
if(isset($_POST['table']) && isset($_POST['parameter']) && isset($_POST['value'])){
$table = ($_POST['table']);
$parameter = ($_POST['parameter']);
$value = ($_POST['value']);
$db = mysql_connect(localhost, root, "");
$select = mysql_select_db(records, $db);
$query="INSERT INTO $_POST['table'] (Parameter,Value)
       VALUES ('".$_POST['parameter']."','".$_POST['value']."');";
}
mysql_query($query,$connection);}
catch(Exception $e)
{
echo 'Erreur : '.$e->getMessage().'<br />';
echo 'N° : '.$e->getCode();
}
?>

此外,提交按钮还有一个onclick()和一个动作标签。单击提交按钮时,我希望执行submit()函数,那么我该怎么做呢?当我按提交时,参数和值值没有被输入我的数据库,称为记录,有4个名为1,2,3和4的表。谢谢!

我认为这条线存在一些问题:

$query="INSERT INTO $_POST['table'] (Parameter,Value)
       VALUES ('".$_POST['parameter']."','".$_POST['value']."');";

1 个答案:

答案 0 :(得分:0)

你已经注释掉了submit(),也许这就是问题...

表单提交取代了onclick调用。

你应该检查一下: http://www.codediesel.com/javascript/prevent-form-submissions-with-javascript-disabled/

<script>
$(function(){
  $("form").submit(function(e) {       
    e.preventDefault();
  });
});
</script>