2017-09-26 160 views
0
[enter image description here][1]  **add.php** 
I am not sure that my data is inserted through ajax or not, can anyone solve my issue. 

這是我add.php文件我正在插入數據庫中的數據,首先我已經包含在該文件中的數據庫連接文件,使用POST方法使用mysqli_real_escape_string提交數據從字符串去除特殊字符。檢查空白字段,鏈接到上一頁,顯示成功消息。只在php中通過AJAX在數據庫中插入數據。

 <html> 
<head> 
    <title>Add Data</title> 


</head> 

<body> 
<?php 
//including the database connection file 
include_once("config.php"); 

    $name = $_POST['name']; 
    $age = $_POST['age']; 
    $email = $_POST['email']; 

    // checking empty fields 
    if(empty($name) || empty($age) || empty($email)) { 

     if(empty($name)) { 
      echo "<font color='red'>Name field is empty.</font><br/>"; 
     } 

     if(empty($age)) { 
      echo "<font color='red'>Age field is empty.</font><br/>"; 
     } 

     if(empty($email)) { 
      echo "<font color='red'>Email field is empty.</font><br/>"; 
     } 

     //link to the previous page 
     echo "<br/><a href='javascript:self.history.back();'>Go Back</a>"; 
    } else { 
     // if all the fields are filled (not empty) 

     //insert data to database 
     $result = mysqli_query($mysqli, "INSERT INTO users(name,age,email) VALUES('$name','$age','$email')"); 



     //display success message 
     //echo "<font color='green'>Data added successfully."; 
     //echo "<br/><a href='index.php'>View Result</a>"; 

} 
?> 
</body> 
</html> 




     **add.html** 
     In this file i have included all my js file creating a small table for name, age, email. my method is post. i am unable to do this task first time i am using ajax without ajax i insert data many times. 
    I am not sure that my data is inserted through ajax or not, can anyone solve my issue. 


     <html> 
<head> 
    <title>Add Data</title> 
    <script src="style/jquery-3.2.1.js"></script> 
    <script src="style/insert.js"></script> 

</head> 

<body> 
    <a href="index.php">Home</a> 



    <br/><br/> 
    <p id="alert"><span id="show"></span></p> 

     <table align="center" width="25%" border="0"> 
      <tr> 
       <td>Name</td> 
       <td><input type="text" name="name" id="name"></td> 
      </tr> 
      <tr> 
       <td>Age</td> 
       <td><input type="text" name="age" id="age"></td> 
      </tr> 
      <tr> 
       <td>Email</td> 
       <td><input type="text" name="email" id="email"></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td><input type="submit" name="Submit" id="submit" value="Add"></td> 
      </tr> 


    </table> 
</body> 
</html> 






     **insert.js** 
     In this file save input value in variable, my type is POST url is add.php, success function is result, my data is inserted but i am not sure that is this through AJAX or not. 
    I am not sure that my data is inserted in database through ajax or not, can anyone solve my issue. 



     $(document).ready(function(e) { 
    $('#submit').click(function() 
    { 

     var name = $('#name').val(); //save input value in variable 
     var age = $('#age').val(); 
     var email = $('#email').val(); 


     $.ajax({ 
      data :{name:name,age:age,email:email}, 
      url :"add.php", //php page URL where we post this data to save in database 
      type :'POST', 
      success: function(data){ 
       alert("Form submitted"); 
       $('#name').val(""); 
       $('#age').val(""); 
       $('#email').val(""); 

      } 
     }) 
    }); 
}); 

回答

1

您的數據是使用簡單的PHP插入的而不是通過ajax。 因爲用(「#name」)在ajax中獲得輸入值意味着輸入id,但是您沒有在輸入字段中定義id屬性。

+0

我在我的代碼中做了很多更改,您的建議和我的承諾可以再次看到我的代碼,我在做錯誤我已附加調試器截圖。 –

1

這應該工作:

$(document).ready(function() { 
    $('#submit').click(function(event){ 
     event.preventDefault(); 

     $.ajax({ 
      type:'POST', 
      data: $(this).serialize(), 
      url:"add.php", //php page URL where we post this data to save in database 
      success: function(result){ 
       $('#alert').show(); 
       $('#show').html(result); 
      } 
     }) 
    }); 
}); 
  • 那對preventDefault額外的通話將 停止正常的回發發生(這將是你的提交按鈕的正常行爲,無論JS事件處理程序)。
  • 此外,您正在嘗試使用您的標記中不存在的標識 來檢索您的字段 - 您需要在文本框中使用id="name"(對於 實例)才能正常工作。但是更簡單的方法來獲取所有表單數據只需使用jQuery的serialize() 方法,就像我上面演示的那樣。
  • 最後你有一個語法錯誤(應該是$.ajax而不是$ajax)。

同時,一個簡單的方法來判斷它是一個Ajax請求與否是是否顯示或不顯示您的警報。如果不是,頁面是否做了完整的回傳?或者是否存在某種Ajax錯誤(在瀏覽器的開發人員工具 - 控制檯和網絡選項卡中)?也許在網上關於調試JavaScript和Ajax的教程,它可能會幫助你。

P.S.使用mysqli_real_escape_string並不完全安全,以防止SQL注入攻擊等。最好的解決方案是使用預準備語句和參數化查詢。 http://bobby-tables.com解釋了風險,並告訴你如何使用PHP和mysqli安全地編寫查詢。

+0

先生,我曾經提過你先生,但無法看到警戒框。如何在提交按鈕上看到警告框 –

+0

如果您無法看到它,請按照我的建議進行操作,並在瀏覽器的開發人員工具中查看控制檯或網絡選項卡中的任何錯誤消息。你從add.php得到什麼迴應? BTW Add.php不應該返回'',''標籤等 - 您不能在另一個HTML文檔中插入HTML文檔。刪除這些。它應該只返回HTML片段,它可以進入你的「顯示」範圍內。 – ADyson

+0

我更新了我的代碼,現在我正在處理上面提到的代碼,你能再次看到我的代碼,我在做錯誤,我附上了調試器截圖。 –

相關問題