2014-02-12 24 views
0

我一直在尋找和研究很多類似的問題,但我還沒有找到解決我的問題的答案。

事情是我想通過使用$ .ajax函數插入數據到MySQL數據庫。我使用一個表單(form.php),一個腳本來插入數據(insert.php)和我的腳本update.js來調用ajax來插入數據(它應該是insert.js ...我知道不過沒關係......)

這裏是我的form.php的:

<?php //form.php 
//script con un formulario 
//conexion a la BD: 
include_once 'connect.php'; 
?> 
<!DOCTYPE html> 
<html lang="es"> 
<head> 
<?php 
    header('Content-Type: text/html; charset=UTF-8'); 
?> 
<script type="" src="jquery-1.11.0.min.js"></script> 
<script type="" src="jquery-1.10.2.js"></script> 
<script type="" src="update.js"></script> 
</head> 
<body> 
    <header> 
     <h3>Ejemplo de forma para actualizar datos con ajax</h3> 
    </header> 
    <nav> 
     <h3>This is the nav area</h3> 
    </nav> 
    <section> 
     <form action="insert.php" name="myform" id="myform"> 
      <fieldset> 
      <legend> Insert new data:</legend> 
      <label for="name"> Name: <input type="text" id="name" name="name"> </label> <br> 
      <label for="age"> Age: <input type="number" id="age" name="age"> </label> <br> 
      <label for="company"> Company: <input type="text" id="company" name="company"></label> <br> 
      <label for="submit"><input type="submit" value="save" id="submitButton" name="submitButton"></label> 
      </fieldset> 
     </form> 
     <div id="msg"></div> 
    </section> 
</body> 
</html> 

這裏是insert.php:

<?php //insert.php 
//script to insert data (sent via ajax) into database 
//conexion a la BD: 
include_once 'connect.php'; 
if(isset($_POST) && !empty($_POST)){ 
    //process data 
    $name=$_POST['name']; 
    $age=$_POST['age']; 
    $company=$_POST['company']; 
    if(mysql_query("INSERT INTO people (name,age,company) VALUES('$name',$age,'$company')")){ 
     echo '<p style="color: green;">Data inserted successfully!</p>'; 
    } else{ 
     echo '<p style="color: red;">There has been an error: <b>'.mysql_error().'</b></p>'; 
     die(mysql_error()); 
    } 
} else{ 
    echo '<p style="color: red;">No data received :(</p>'; 
} 
?> 

最後,這裏是我的.js代碼 更新.js:

$(document).ready(function(){ 
    $('#submitButton').on('click', function(){ 
     //retrieving the data submitted: 
     var name = $('#name').val(); 
     var age = $('#age').val(); 
     var company = $('#company').val(); 
     alert('The following data is about to be sent: 1) Name: '+ name + '. 2)Age: '+ age + '. 3)Company: '+ company); 
     $.ajax({ 
      url: 'insert.php', 
      type: 'POST', 
      data: { 
       name: name, 
       age : age, 
      company : company 
      }, 
      'beforeSend':function(){ 
       alert('Ya los voy a enviar, eh?'); 
      }, 
      'success': function(result){ 
       $('#myform').hide(); 
       $('#msg').html(result); 
       alert('Success!'); 
      }, 
      'error': function (xhr, ajaxOptions, thrownError) { 
     alert(xhr.status); 
     alert(thrownError); 
      } 
     });//end of ajax 
    }); 
}); 

代碼錯在哪裏? 我不能讓它的工作:(

請幫幫忙!

+0

你肯定被調用的按鈕點擊方法? – steinmas

+0

是的,我是,因爲我得到警報確認ajax已檢索每個變量中的數據。 – Pathros

回答

0

您發送您的形式變量的值,因爲在您的文章數據的變量的名稱。用引號括應解決您的問題

 data: { 
      'name' : name, 
      'age' : age, 
      'company' : company 
     }, 
+0

不要忘記dataType。 – aerojun

+0

它沒有工作:(我試過了引號,但仍然不起作用。在表單中,是否離開action =「」(空)或action =「insert.php」是否有關係?此外,url更改對於這個:insert.php?name = Marc + Antony&age = 36&company = Salsa&submitButton = save – Pathros

+0

不,因爲ajax截獲了真實的表單動作。 –

0

此行添加到您的形式:。

<form action="insert.php" name="myform" id="myform" method="POST"> 

您忘記用於傳輸數據的形式方法你期望文章中,我PHP和默認的如果GET。

此外,如果您使用<form>,則不需要使用jQuery(據我所知)。 的form.php的:

<!DOCTYPE html> 
<html lang="es"> 
<head> 
<?php 
    header('Content-Type: text/html; charset=UTF-8'); 
?> 
<script type="" src="//code.jquery.com/jquery-1.10.2.min.js"></script> 
<script type="" src="update.js"></script> 
</head> 

<body> 
<header> 
    <h3>Ejemplo de forma para actualizar datos con ajax</h3> 
</header> 
<nav> 
    <h3>This is the nav area</h3> 
</nav> 
<section> 
    <form action="insert.php" name="myform" id="myform" method="POST"> 
     <fieldset> 
     <legend> Insert new data:</legend> 
     <label for="name"> Name: <input type="text" id="name" name="name"> </label> <br> 
     <label for="age"> Age: <input type="number" id="age" name="age"> </label> <br> 
     <label for="company"> Company: <input type="text" id="company" name="company"></label> <br> 
     <label for="submit"><input type="submit" value="save" id="submitButton" name="submitButton"></label> 
     </fieldset> 
    </form> 
    <div id="msg"></div> 
</section> 
</body> 
</html> 

的JS:

$(document).ready(function() { 
$('#submitButton').on('click', function() { 
    //retrieving the data submitted: 
    var name1 = $('#name').val(); 
    var age1 = $('#age').val(); 
    var company1 = $('#company').val(); 
    alert('The following data is about to be sent: 1) Name: ' + name1 + '. 2)Age: ' + age1 + '. 3)Company: ' + company1); 
    $.ajax({ 
     url: 'insert.php', 
     type: 'POST', 
     data: { 
      name: name1, 
      age: age1, 
      company: company1 
     }, 
     'beforeSend': function() { 
      alert('Ya los voy a enviar, eh?'); 
     }, 
     'success': function(result) { 
      $('#myform').hide(); 
      $('#msg').html(result); 
      alert('Success!'); 
     }, 
     'error': function(xhr, ajaxOptions, thrownError) { 
      alert(xhr.status); 
      alert(thrownError); 
     } 
    }); //end of ajax 
}); 
}); 
+0

哦,是的,當我設置動作和方法時它工作正常......但是然後ajax在這裏沒有任何事情......我希望它插入數據而無需刷新......這就是我真正想要的。 $ .ajax的'成功'部分從不加載。 – Pathros

+0

刪除表格,只留下內容並嘗試。告訴我發生了什麼事。 – aerojun