duanlao6573
duanlao6573
2014-02-01 14:23

Jquery ajax添加到mysql数据库

  • php
  • mysql
  • ajax
  • javascript
  • jquery

I want to save data from input fields to mysql database so first I create a modal window and input fields:

<!-- Button trigger modal -->
<button class="btn btn-success" data-toggle="modal" data-target="#myModal">
Add new</button>
<div id="output"></div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Add new row</h4>
         </div>
         <div class="modal-body">
            ......
            <div class="input-group">
               <span class="input-group-addon">Ime</span>
               <input type="text" id="Ime" class="form-control" placeholder="Upisi ime">
            </div>
            </br>
            <div class="input-group">
               <span class="input-group-addon">Pol</span>
               <input type="text" id="pol" class="form-control" placeholder="Pol (male/female)">
            </div>
            </br>
            <div class="input-group">
               <span class="input-group-addon">Godine</span>
               <input type="text" id="godine" class="form-control" placeholder="Godine starosti">
            </div>
            </br>
            <div class="input-group">
               <span class="input-group-addon">Broj pojedenih krofni</span>
               <input type="text" id="krofne" class="form-control" placeholder="Pojedene krofne">
            </div>
            </br>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button id="newData" class="btn btn-primary">Add new data</button>
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Now I write jQuery AJAX code to add data to database:

 <script>
  //add data to database using jquery ajax
$("#newData").click(function() {
    //in here we can do the ajax after validating the field isn't empty.
    if($("#ime").val()!="") {
        $.ajax({
            url: "add.php",
            type: "POST",
            async: true, 
            data: { Name:$("#ime").val(), Gender:$("#pol").val(), Age:$("#godine").val(), Donuts_eaten:$("#krofne").val()}, //your form data to post goes here as a json object
            dataType: "html",

            success: function(data) {
                $('#output').html(data); 
                drawVisualization();   
            },  
        });
    } else {
        //notify the user they need to enter data
    }
});
</script>

and finally I create a php file (add.php)

<?php

$con = mysql_connect('localhost', 'gmaestro_agro', 'pass') or die('Error connecting to server');

mysql_select_db('gmaestro_agro', $con); 

    mysql_select_db('gmaestro_agro', $con);
    $query = "INSERT INTO `stat` (`Name`, `Gender`, `Age`, `Donuts eaten`) VALUES (";
    $query .= mysql_real_escape_string($_POST['Name']) . ", ";
    $query .= mysql_real_escape_string($_POST['Gender']) . ", ";
    $query .= mysql_real_escape_string($_POST['Age']) . ", ";
    $query .= mysql_real_escape_string($_POST['Donuts_eaten']);
    $query .= ")";
    $result = mysql_query($query);
    if($result != false) {
        echo "success!";
    } else {
        echo "an error occured saving your data!";
    }

?>

Now, when I try to add data I just get this error: an error occurred saving your data!.

What is the problem here exactly? I try to find the error whole day...

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

2条回答

为你推荐

换一换