jQuery的阿賈克斯沃金只有一次

Question

function postData() { 
    var fName=$("#fName").val(); 
    var lName=$("#lName").val(); 
    var city=$("#city").val(); 
    var data="fName="+fName+"&lName="+lName+"&city="+city+"&submit=submit"; 
    $.ajax({ 
     type:'POST', 
     url:'employeeajaxcodebehind.php', 
     data:data, 
     success:function(data){ 
     $("#results").html(data); 
     } 
    }); 
} 

PHP代碼如下

if(isset($_POST['submit'])) { 
    $fName=$_POST['fName']; 
    $lName=$_POST['lName']; 
    $city=$_POST['city']; 
    $Query="INSERT INTO employee(emp_id,firstname,lastname,city) VALUES ('','$fName','$lName','$city')"; 
    $Result=mysql_query($Query); 
    viewRecord(); 
} 

HTML：

<form method="POST"> 
    Firstname: <input type="text" id="fName" name="fName"><br> 
    Lastname: <input type="text" id="lName" name="lName"><br> 
    City: <input type="text" id="city" name="city"><br> 
    <input type="submit" id="submit" name="submit" onclick="postData();"> 
</form> 

現在的問題是，每當我打開網頁我插入一條記錄及其混得成功救了我D B。但是當我添加另一個記錄時，它沒有得到保存...我必須重新加載頁面上每個插入...

這是什麼問題？另外，PHP函數viewRecord();應當執行，但它不是...

Answer 1

使用.serialize()從窗體中獲取數據。

此外您的表單發送數據兩次 - 在onclick和onsubmit。請通過添加return false;

Answer 2

這是因爲您要添加的EMP_ID爲空白（如果它不是一個主鍵或唯一鍵）。你需要在sql中省略這一點：

$sql = "INSERT INTO employee(firstname,lastname,city) VALUES ('$fName','$lName','$city')"; 

JS更改：因爲您使用的是提交按鈕。你需要防止頁面不刷新。所以改變你的阿賈克斯這樣的電話：

<script type='text/javascript'> 
    /* attach a submit handler to the form */ 
    $("#commentForm").submit(function(event) { 

     /* stop form from submitting normally */ 
     event.preventDefault(); 

     /* get some values from elements on the page: */ 
     var $form = $(this), 
     var url = "employeeajaxcodebehind.php" // or $form.attr('action'); 

     /* Send the data using post */ 
     var posting = $.post(url, { fName: $('#fName').val(), lName: $('#lName').val(), city: $('#city').val() }); 

     /* Put the results in a div */ 
     posting.done(function(data) { 
     $("#results").html(data); 
     }); 
    }); 
</script> 

Answer 3

來防止提交事件。@skparwal提到的問題是，您正試圖將「'插入到您的主鍵中。插入後需要使用mysql_error()才能查看發生了什麼錯誤。看看這個鏈接如何做到這一點：http://php.net/manual/en/function.mysql-error.php

此外，您的阿賈克斯將不會達到預期效果，因爲你不是的onClick（），這意味着形式每次提交阿賈克斯後返回false呼叫被觸發。

此外，您應該轉移到mysqli或PDO，因爲mysql已被棄用。

編輯

試試這個，但是這並不意味着工作或成爲最終的實現，它只是讓你在正確的道路上。這是未經測試的產品可能存在一些誤區：

改變你的JavaScript這樣的：

$(function(){ 
    $('#submit').click(postData); 
}); 

function postData() { 
    var fName=$("#fName").val(); 
    var lName=$("#lName").val(); 
    var city=$("#city").val(); 
    var data="fName="+fName+"&lName="+lName+"&city="+city+"&submit=submit"; 
    $.ajax({ 
     type:'POST', 
     url:'employeeajaxcodebehind.php', 
     data:data, 
     success:function(data){ 
      $("#results").html(data); 
     } 
    }); 
    return false; 
} 

改變你的PHP這樣的：

if(isset($_POST['submit'])) { 
    $fName=$_POST['fName']; 
    $lName=$_POST['lName']; 
    $city=$_POST['city']; 
    $Query="INSERT INTO employee(firstname,lastname,city) VALUES ('$fName','$lName','$city')"; 
    if(!($Result=mysql_query($Query))) 
     exit('@todo need to check for error here'); 
    viewRecord(); 
} 

你的HTML改成這樣：

<form method="POST"> 
    Firstname: <input type="text" id="fName" name="fName"><br> 
    Lastname: <input type="text" id="lName" name="lName"><br> 
    City: <input type="text" id="city" name="city"><br> 
    <input type="submit" id="submit" name="submit"> 
</form>